From the course: CSS to Sass: Converting an Existing Site
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Use color variables
From the course: CSS to Sass: Converting an Existing Site
Use color variables
- Okay, so now I have a list of all the colors, all named with variables. So it's time to start using these in our source sass code. The first thing we want to do is actually import the variables into our main styles.scss file. So let's go into that file. And we're gonna make the first line @import variables and make sure you add the semicolon at the end there and save that file. Note that we don't need to include the leading underscore, since Sass will look for that file both with and without the underscore by default. Back in our variables files, we see the first color is this #ffffff, which can also be defined as just a three-digit hexadecimal value. So the first thing I'm going to do is search for this in our scss file by opening that folder. And we're going to right click the sass folder and go to find in folder. And the thing I'm going to be searching for is #fff. So I'll click find. We have to ignore the variables and we see there are two instances of it in our source sass…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Create color variables3m 45s
-
Use color variables6m 55s
-
Abstract layout units into variables3m 38s
-
Abstract font values into variables8m 22s
-
Abstract z-index values into variables2m 47s
-
Install csscss2m 5s
-
Mixins worth creating6m 33s
-
Create advanced mixins4m 44s
-
Apply our advanced mixin5m 57s
-
Manage media query breakpoints with include-media6m 53s
-
-
-
-