Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Color Variables

8:34 with Guil Hernandez

Sass variables make the repetitive nature of CSS easier to manage because they let us store information that's reused throughout a project. First, we'll create variables for color values in our project.

Teacher's Notes
Video Transcript
Downloads

Color Variables

// Descriptive color variables

$white          : #fff;
$black          : #000;
$grey           : #878787;
$regent-st-blue : #add8e6;
$river-bed      : #48525c;
$yellow-orange  : #ffa949;

// Functional color variables

$color-border-light : lighten($grey, 35%);
$color-border-dark  : $yellow-orange;

$color-link-default : $yellow-orange;
$color-link-visited : $regent-st-blue;

$color-shadow       : rgba($black,.8);
$color-body         : $white;

Tools

Name that color

Quick Reference

So here's another misconception I've heard about Sass. 0:00

I'm a designer. 0:03

If I use Sass, it'll change the way I think, and turn me into a developer. 0:04

No, Sass isn't gonna take control of your mind and turn you into a developer. 0:08

But as we've seen, it can change the way you write CSS. 0:12

Even though Sass does borrow features from certain programming languages, 0:16

they're only there to make projects easier to build and maintain. 0:19

Like variables, for instance. 0:22

Earlier, I mentioned how CSS can be repetitive. 0:24

Well, Sass variables make the repetitive nature of CSS easier to manage. 0:27

Because they let us store information that's reused throughout a project. 0:31

Like values for colors, font stacks, media query break points, 0:35

or any reusable CSS value. 0:38

So now we can clean up our code even further with variables. 0:41

Because variables reduce a lot of the duplication in CSS declarations and 0:45

they also make our code easier to read. 0:49

Now, I like to keep all of my variables in a separate partial 0:52

located inside the base directory. 0:55

So let's create a New File inside our base folder. 0:58

And we're going to name it _variables.scss. 1:02

So before we move on, 1:10

let's not forget to import this new partial into our stylesheet. 1:11

So we'll go over to the index partial and we're going to import it at the very top. 1:15

So I'm going to copy the base partial import, 1:21

paste it right above it, and change the filename to variables. 1:25

Now we'll need to make sure that we are importing the variables partial first, 1:31

since this will contain all the global dependencies in our project. 1:36

So now I can go ahead and save index. 1:40

And close it out. 1:43

And back in our variables partial, let's first create variables for 1:44

color values in our project. 1:48

Now, there are a lot of ways we can declare color variables, and you'll see 1:50

tons of discussions and opinions on the web on how to write or structure these. 1:55

So let's do what makes sense for our project here. 1:59

So we're going to use a two-tier color variable method. 2:02

The first tier will have descriptive color variable names and 2:06

the second tier will be the functional variable names. 2:10

Overall I think that will be a pretty maintainable solution for us. 2:13

So because of that, I sometimes use this pretty neat tool called Name that Color 2:17

for generating color variable names. 2:23

And I've posted the link to it in the teacher's notes. 2:25

So back in our variables file, let's first declare the descriptive variables. 2:29

So we're gonna add a comment for that. 2:34

So let's type descriptive color variables. 2:36

So first, let's declare the variable name white. 2:43

And for this, we're going to use the hex value fff. 2:49

Now right below that, let's write another descriptive variable name. 2:53

This time, we'll write black. 2:57

And for this, we're going to use the hex value 000, which is pure black. 3:00

And right below that let's do one more for gray. 3:05

And for gray, we're going to define the hex value #878787. 3:08

So next, instead of typing out the rest of the variables, I'll just go ahead and 3:15

paste them below. 3:20

You can also copy these variable names from the teacher's notes on the page. 3:22

So, right below the ones we just wrote, 3:25

I'm going to paste in the new variable names. 3:27

And, in case you're wondering, 3:30

these were color names generated by that Name that Color tool I just showed you. 3:31

So, next, we're going to create a second set of variables that 3:36

describe a color's function. 3:40

So let's create a comment for that. 3:42

We're going to say functional color variables. 3:44

And for these variables, 3:49

we're going to follow a specific pattern that makes them easier to read. 3:51

So first we're going to define the generic term they all share, so for 3:54

example, color. 3:59

And then we're going to write a more specific description. 4:01

So for example, here let's say color primary, or prim. 4:04

And as the color prime value, we're going to use the yellow-orange variable. 4:11

So let's create one more. 4:18

Let's say color secondary, so let's say color-sec. 4:19

And as the value for color-sec, we're going to define the river-bed variable. 4:23

And we're going to do the same for our text color, so right below the primary and 4:32

secondary colors, let's say color-text and 4:38

then let's find the light text color. 4:42

So we'll say color-text-light and as the value for 4:45

color-text-light we're going to use the white variable. 4:50

All right, so let's do a couple more. 4:55

Let's do color-text-base for our base text color. 4:57

So we'll create a new variable called color-text-base and 5:02

the value for this will be the gray variable. 5:06

And, one more. 5:11

So right below, I'll just paste in the color-text prefix and 5:12

let's say color-text-dark. 5:15

And, for that, we're going to define the river-bed variable. 5:18

So, I'll just go ahead and copy it, paste it as the value. 5:23

So, once again, instead of writing out the rest of the color variables, 5:28

I'm gonna go ahead and paste them below. 5:31

But you can also grab these from the teacher's notes. 5:35

So as you can see here in the second set of variables, 5:38

we can even use color operations for certain color variations. 5:41

Like we did here for the border-light variable and 5:45

the shadow variable, we used an rgba function. 5:49

All right, so 5:53

now we can use these functional variables as color values in our style sheets. 5:54

So, for instance, let's go inside our layout folder and open up our 6:00

header partial and replace some of the hex values with our new variables. 6:04

Now there's a handy shortcut in Workspaces we can use to find and 6:09

replace values with variables. 6:13

And that shortcut is Cmd+Opt+F. 6:15

And for Windows, it's Ctrl+Alt+F. 6:18

And the shortcut should also work in other text editors, like Sublime Text. 6:21

So if, for example, let's say this was a much longer style sheet, we could say, 6:26

we wanna replace this hex value here with one of our variables. 6:30

So you can say replace ffa949 and we'll want 6:35

to replace it with that color-prim variable, that yellow-orange color. 6:39

So we'll say color-prim, and once you hit enter, I'll say yes. 6:43

Yes. 6:50

And as you can see it replaced our hex value with our color-prim variable. 6:51

So next we can also replace this hex value here with one of our variables. 6:57

So let's say color-body, 7:01

which is white, as we can see here in the variables partial. 7:05

All right so let's save our header file. 7:12

Close it out and do a couple more. 7:14

So let's open up our base.scss file. 7:16

And, let's replace the body color hex value with the color-text-base variable. 7:21

So, we'll say, color-text-base. 7:28

So next let's scroll down to the h3 and 7:33

change the color hex value to the variable color-text-dark. 7:36

And let's also scroll down and add variables for our link color values. 7:44

So first let's replace this RGB value here, which is actually just orange. 7:49

With the color-link-default variable, so 7:54

we'll say color-link-default, and right below that, 7:58

we can replace the color lightblue with the color-link-visited variable. 8:03

And finally, in the hover rule, we can keep the RGBA function, but 8:12

let's change these three values to the color-link-default variable, 8:15

and it will still take down the alpha to 0.5. 8:21

So I'm gonna stop here, but you can go ahead and 8:25

finish replacing the rest of the color values in our site with variables, and 8:27

then I'll meet you in the next video. 8:32

You need to sign up for Treehouse in order to download course files.

Sign up