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
Using CSS variables in your stylesheet is a two-step process. First, you declare the variable inside a selector using custom property notation. Then you reference the variable (or custom property name) using the CSS var() function.
Using CSS variables in your style
sheet is a two step process.
0:00
First you declare the variable inside
a selector using custom property notation.
0:04
Then you reference the variable or custom
property name using the CSS R function.
0:08
We'll start with a common and
practical application of variables,
0:13
then look at other ways you can
use variables in later videos.
0:16
And to code along with me,
launch the workspace with this video, or
0:19
download the project files if you'd
like to use your preferred text editor,
0:22
I'm using Adam.
0:26
In the project files,
you'll see and HTML file and
0:26
two style sheets in the CSS folder.
0:30
Style.css contains all the base styles for
the page,
0:32
which you'll see once you preview
the files in the browser.
0:35
We're going to style the rest of the page
using CSS variables in the file,
0:38
variables.css.
0:43
So you normally, when I write here CSS
variables in a separate file like that and
0:44
it's not necessary for CSS variables work.
0:48
We're just using CSS variables in
a separate file to make the concepts I'm
0:51
teaching easier to understand.
0:55
And you learned in the previous video,
0:56
CSS Variables works like
regular -property value pairs.
0:59
You write them just as you would write
a regular CSS Property except you make out
1:02
the property name yourself.
1:06
And adding two dashes
in front of the name,
1:08
automatically identifies it as a variable.
1:10
Now CSS variables,
like regular CSS properties,
1:12
follow the rules of the cascade.
1:15
So you'll have to first declare them
on an element inside a rule set.
1:18
Keep in mind that if you declare
a variable outside of a rule,
1:22
it's not going to work you will not be
able to use a variable in your style feed.
1:25
And you'll often declare variables that
will be referenced by many elements like
1:29
your main brand color,
base font size, and so on,
1:34
on the root element using
the :root pseudo class.
1:37
So at the top of our style sheet,
1:40
let's create a new rule using
the :root pseudo class.
1:42
Remember the :root pseudo class targets
the root element on the page or
1:47
the highest level parent.
1:51
This will usually be the HTML element,
1:53
because it's the top most
element in the document.
1:55
So back inside the root rule, I'll create
variables for the main colors of my site.
1:59
First, I'll write the custom
property name color-primary,
2:05
and I'll set it to #278da4.
2:12
Below that, I'll create a variable
2:16
named color-secondary, and
2:22
I'll set it to #b13c69.
2:27
So writing the custom property
names inside the root
2:34
rule scopes the properties to
the highest level in the CSS cascade.
2:37
Now the values can be inherited by
all elements in the document and
2:42
we can reference them from
anywhere in the style sheet.
2:46
This is similar to declaring global
variables in SaaS or in JavaScript,
2:49
because the values
are available everywhere.
2:52
Now the browser doesn't do anything
with a custom property at first.
2:56
It has no immediate effect.
3:00
Whereas regular CSS properties like color,
padding or
3:03
font size has specific meanings for the
browser, these custom properties have no
3:06
meaning further than the meanings
you give them when naming them.
3:11
So to us, these mean our site's primary
and secondary color values, but
3:15
to the browser they mean nothing yet.
3:20
To get the value of a custom
property you use the var function.
3:23
Var can be used in place of
the value of any property.
3:28
So let's first use the values
assigned to color primary and
3:32
color secondary to set
the color values of the links,
3:35
the h2 and the background
color of our page's buttons.
3:39
So, first I'll scroll down to our a,
3:43
h2 rule here and
set the color value to var.
3:46
And inside the parentheses,
we'll specify the color primary variable.
3:51
I'll refresh the page, and now we see the
H2s and links with the new color, neat.
3:58
Back in our stylesheet, I'll scroll
down to the button callout rule and
4:04
set the background color
to the var function and
4:10
paste the color secondary variable.
4:14
And right below the button callout rule,
4:17
we'll set button info's background color
passing it the color primary variable.
4:20
So, with the variables in place,
any time you change the value of a custom
4:27
property here, the change gets passed
along to all uses of the variables.
4:31
Making CSS authoring a bit easier and
less error prone and color-primary and
4:36
color-secondary are also easier
to understand than #278da4,
4:42
or #b13c69, a properties value can also
contain one or more bar functions.
4:48
For example, inside the root rule
let's create two new variables.
4:55
We'll start with --color-bg and
5:00
set the value to #3ace c2.
5:05
I'll create another property
named color-bg-light and
5:09
set it's value to #009fe1.
5:17
And then I'll give the header rule
a linear gradient using the colorbg and
5:22
color light variables
at this color values.
5:29
So in front of the URL, I'll add a,
and then before the comma,
5:33
I'll add a linear-gradint function.
5:39
And first I'll pass it
the first value using var.
5:43
So we'll say var and
specify --color-bg-light.
5:46
After that, a comma, and
add another var function.
5:52
And I'll pass this var function,
the color bg variable.
5:57
And as we can see, the blend mode
colors in, the header changed.
6:06
Now it's that nice linear gradient, cool.
6:10
And it's also possible to assign a value
to a variable using other variables, and
6:13
this can be useful when you need multiple
color values, to create a gradient for
6:17
example.
6:22
So in the root rule,
I'll create a new variable named gradient.
6:23
And as it's first value,
I'll assign it var and
6:31
I'll specify --color-bg-light,
we'll add a comma and
6:35
I'll assign it a second value using var,
6:41
this time passing it
the color bg custom property.
6:45
So we're referencing the custom
properties we declared here and
6:51
the values for gradient.
6:56
So now, in the header rule,
I'll just reference the gradient variable.
6:58
So I'll replace the two var functions
with just one, passing it gradient.
7:03
And as you can see,
it works exactly the same way.
7:13
You can also use CSS variables for
font stacks, layout styles, and
7:18
more to avoid duplication.
7:23
So below the gradient property,
create a new property for my font stacks.
7:25
I'll start with --font-stack-primary,
and I'll assign it the font Raleway.
7:30
And sans-serif.
7:40
Below that, I'll create a new CSS
variable called --font-stack-secondary.
7:45
I'll assign this variable.
7:52
The value Bree Serif, serif.
7:56
Then I'll create two more CSS variables
for layout styles, let's say --max-width.
8:02
I'll assign it the value 1000px and
--gutter, and
8:08
set it to 12 pixels, and
then down in the CSS rules.
8:14
I’ll set the body's font
family value to var,
8:20
passing it the font
stack primary variable.
8:24
Then in my heading rules,
I'll go ahead and
8:33
pass it the variable font stack secondary.
8:36
I'll just simply copy
the variable function above and
8:40
change the value to
--font-stack-secondary.
8:43
All right I'll scroll down to
the navigation styles so the main-nav li
8:47
rule and here I'll set the margin value
to 0 followed by var function and
8:52
this is where I'll specify
the gutter custom property.
8:57
And then down in the media query,
I'll set main contents
9:01
max-width to the var function
passing it our max-width
9:07
variable So with just
9:13
a few lines of CSS, you can completely
change the look and feel of your site.
9:18
You set a variable once and reference it
wherever you need it, change it once and
9:23
it's changed everywhere.
9:28
Now this may not be incredibly exciting or
Earth-shattering because we've been able
9:29
to do this with CSS pre-processors and
PostCSS for a while now.
9:34
You see, what's exciting about CSS
variables is that they can do many things
9:37
you can't do with pre-processors.
9:41
So in the next video we'll look at why.
9:43
You need to sign up for Treehouse in order to download course files.
Sign up