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

Use color variables

From the course: CSS to Sass: Converting an Existing Site

Start my 1-month free trial

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…

Contents