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
CSS can be immensely repetitive, and maintaining it can be cumbersome. Variables are a core feature of Sass that provide a way of storing and keeping track of information. When you create variables in Sass, you store values that you reference throughout your stylesheets.
Resources
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
CSS can be immensely repetitive.
0:00
And maintaining it can be cumbersome.
0:02
For instance, how many times have
you reused a color, a list of fonts,
0:04
or a link value in your style sheet?
0:08
Then later, due to a design change or
0:10
client request, had to spend
valuable time changing each value.
0:12
Sass borrows certain concepts and
features from programming languages to
0:16
make your style sheets less repetitive,
faster to write and easier to maintain.
0:19
So let's start with a core
feature of sass, variables.
0:23
Variables are one of the most
important concepts in programming.
0:27
They provide a way of storing and
keeping track of information.
0:30
When you create variables in sass,
0:33
you store values that you've referenced
throughout your style sheets.
0:35
For example, if you use the same color for
0:37
a font, a background, and a border, you
can declare a variable for that color and
0:40
reference that variable
anywhere you use that color.
0:44
Let me show you how.
0:47
In the style.scss file,
0:47
let's use a variable to store this
hex color value in the card h1 rule.
0:51
If you hover over it in workspaces,
you'll see that it's a shade of teal.
0:56
This color is going to be
repeated several times in our
1:00
project to style important elements
like headings, icons, buttons and more.
1:03
Variables in sass are declared
using the dollar sign.
1:09
So at the very top of the file, type
a dollar sign to create a new variable,
1:12
and right next to the dollar sign with
no space, you write the variable name.
1:19
Which can be any name you want.
1:23
It's helpful to use a name that clearly
describes the variable's purpose.
1:25
For example, this color will
represent the brand color, or
1:28
main color used throughout the site.
1:31
So we'll name the variable color-primary.
1:33
And assign it the hex value, #278da4.
1:38
Now let's replace each of the teal hex
value with the new color-primary variable.
1:46
So I'll simply copy it then
scroll down to the card h1 rule.
1:51
Replace the color value with
color-primary, then right below
1:56
place btn-info's background-color
with color-primary.
2:02
Give style.scss a save, and
over in style.css you'll
2:07
see that says output the value 278da4,
wherever we use the color-primary.
2:12
So in card h1 and btn-info.
2:19
Now the variable declaration itself and
other variable references will never
2:24
appear in the CSS output
because it isn't valid CSS.
2:28
Now back inside style.scss,
at the very top,
2:32
let's create variables for
our secondary and accent colors.
2:36
Right below color-primary, we'll create
2:41
a new variable called color-secondary, and
2:46
we'll assign it the value #b13c69.
2:51
Below that we create
a variable color-accent and
2:55
give it the hex value, #eeea72.
3:01
We'll use the color-secondary variable in
a later video when we style our buttons,
3:06
but let's use
the color-accent variable now
3:12
to set the header paragraph's color value.
3:15
So I'll scroll down to the header p rule.
3:18
Add a color property and
set it to color-accent.
3:24
Now variables aren't just for colors,
it's common to create variables for
3:28
storing lists of fonts called font stacks.
3:32
So up here in our variables,
let's create two font stack variables.
3:35
We'll name the first
one font-stack primary.
3:39
And set it to Raleway,
3:46
sans-serif.
3:51
Right below we'll create the variable,
font-stack secondary
3:55
And set it to Bree Serif, serif.
4:05
Now you may also see font-stack
variable names like font-stack sans or
4:12
font-stack serif.
4:16
But I'll stick to this primary,
secondary to this project.
4:17
Now I'll set the bodies, font-family, to
font-stack-primary here in the body rule.
4:20
By replacing the font-family
value with font-stack-primary.
4:28
Then right below in the h1 and
h2 rule here,
4:32
I'll set the font-family value
to font-stack-secondary.
4:35
So sass variables make the repetitive
nature of CSS easier to manage, and
4:43
let you change property values in
one place without having to find and
4:47
replace them across multiple files and
directories.
4:51
So for example, if you're not to really
feeling the color teal as your heading and
4:54
button background colors,
4:59
simply change the value of
color-primary to a different color.
5:01
And you'll see the color
values change all at once.
5:06
Now I'm usually cool with tomato but
not in this case.
5:11
So I'll go ahead and
change it back to the teal color.
5:14
Variables are one of the core
sass features you'll use most.
5:19
So in the next video,
I'll teach you a few best practices for
5:21
creating variable names in sass.
5:24
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