Preview
Video Player
00:00
00:00
Declaring and Using Variables
5:28CSS 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.
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