Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS to Sass!
You have completed CSS to Sass!
Preview
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up