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 Using CSS Variables!
You have completed Using CSS Variables!
Preview
CSS variables weren't created just to offer the same functionality as preprocessor variables. Variables are a game changer in CSS, and there are plenty of differences and advantages to using CSS variables over preprocessor variables.
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 variables weren't created
just to be the CSS equivalent
0:00
of preprocessor variables, or
even offer the same functionality as them.
0:04
Variables in CSS can do many things you
can't do with preprocessor variables.
0:08
They each behave differently
under certain circumstances.
0:12
In fact, it's like they're two different
entities and live in separate worlds.
0:15
Let's look at why.
0:18
You see,
preprocessors don't run in the browser.
0:20
The variables you declare living
a source file in your machine.
0:24
Preprocessors just replace variables
with static values when they're
0:27
compiled to CSS.
0:31
The browser knows nothing
about the variables and
0:32
the variables themselves know
nothing about your markup.
0:35
On the other hand, CSS variables are
entirely more flexible than compiled code.
0:39
Because they live in the browser.
0:44
When you update a CSS variable's value,
0:46
the browser updates it anywhere
it's referenced at runtime.
0:49
This gives them dynamic capabilities and
opens up lots of interesting possibilities
0:53
than just replacing colors and
font values.
0:57
For example, in a preprocessor you can't
update the value of a variable from within
1:00
a media query.
1:04
So in this SAAS example, the headline
classes margin-bottom value cannot be
1:05
changed to 2rem inside a media query by
updating the gutter variable like this.
1:09
But you can with CSS variables.
1:13
Their values are updated
live inside media queries.
1:15
For instance,
in the latest style sheet for
1:19
this video, I see that the gutter variable
is scoped to the root element, so
1:20
I'm going to change its value
from 12 pixels to 1rem.
1:25
Then I'll scroll down and give the header
a margin-bottom property that reference
1:28
the gutter variable as its value.
1:33
Also the cards on the page are being
laid out with CSS grid via
1:41
the main content div.
1:46
So I'll add a gutter or
gap between the cards.
1:48
First I'll target
the class main-content and
1:52
add a grid-gap property with its
value set to the gutter variable.
1:56
Now I'll use media queries to provide
a new context that updates the value of
2:03
the gutter variable without having to
respecify any selectors like header and
2:08
main content, or
any CSS properties inside the media query.
2:12
So first I'll create a new media query.
2:17
That target devices that
are a minimum of 576 pixels.
2:21
And here I'll update the value
of gutter in the root scope.
2:31
So I'll add the root pseudo-class.
2:36
And inside that,
lets update the value of gutter to 3rem.
2:40
Then in the next media query,
2:46
I'll once again update the value
of gutter inside root.
2:48
So I'll simply copy the selector
I wrote in the first media query.
2:52
Paste it here.
2:57
And this time I'll set it to
a larger value like 5rem, just so
2:59
we can see the changes in the browser.
3:03
So notice how I'm only including the root
selector scope and the updated variables.
3:07
Not the main content and
hetero selectors, or
3:13
the actual CSS properties
that reference the variable.
3:16
I'll give this a save.
3:19
And as you'll see, the gutter variable
is responsive and updates dynamically.
3:21
As I resize the browser,
the margin values change.
3:26
Now have a look at this
fun demo I created,
3:35
that shows how CSS variables can
reset values inside media queries.
3:37
This time I'm using a CSS
animation of a ball.
3:42
As you can see, the ball moves up and down
on small screens, then switches to a side
3:45
to side animation on medium screens, then
a diagonal animation on large screens.
3:50
In the CSS for this, the ball rule
has a variable called animate,
3:57
which calls the bounce
keyframe sequence by default.
4:03
In the first media query,
4:08
the animate variable is set to
the slide keyframe sequence,
4:09
then it's set to the diagonal sequence
in this wider media query context.
4:13
You'll find a link to this demo in
the teacher's notes of this video.
4:19
You can even forward
the workspace snapshot and
4:22
experiment with the values yourself.
4:24
Another example of how CSS variables
can be updated and altered dynamically,
4:28
is updating their values inline within
the style attribute of an element.
4:32
For example, the learn more buttons
in the cards use the color primary
4:36
variable to set their background color.
4:41
I'll open up index.html and
add a style attribute to one
4:46
of the anchor elements
with the btn-info class.
4:51
And here I'll update the value
of the color primary variable,
4:58
to let's say, firebrick.
5:03
And as you can see, we immediately
see the change in the browser.
5:06
This is not possible with
static preprocessor variables,
5:09
because, as I mentioned earlier,
they know nothing about your markup.
5:12
All right, so in the next video,
you'll learn how CSS variables cascade and
5:16
inherit their value from their parent.
5:21
We'll define and reset variables at
different levels of specificity.
5:23
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