Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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
Quick Reference
Related Videos
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