- Introducing "CSS Custom Properties for Cascading Variables" 2:24
- Declaring and Using CSS Variables 9:46
- CSS Variables vs. Preprocessor Variables 5:28
- Cascade and Inheritance with CSS Variables 5:30
- Providing Fallbacks and Building Length Values 3:00
- Using CSS Variables with SVG 3:33
- Updating CSS Variables with JavaScript 6:41
- Best Practices and Tips 1:02
Preview
Video Player
00:00
00:00
CSS Variables vs. Preprocessor Variables
5:28CSS 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.
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