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
Since CSS variables follow the standard cascade rules, they behave like regular CSS properties. That means they inherit, cascade and can be declared on (or scoped to) any CSS selector. You can define and reset a variable at different levels of specificity.
This video doesn't have any notes.
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
You learned that to define a CSS variable
you begin by defining its scope.
0:00
And scoping a variable to the root
implies that the variable is available to
0:04
all elements.
0:08
Well, using root is a great way
to set global variables and
0:10
keep all your variables in one place for
easy maintenance like this.
0:13
You don't always need to define
your variables inside root.
0:16
Since CSS variables follow
the standard cascade rules,
0:20
they behave like regular CSS properties.
0:23
So that means they inherit,
cascade, and can be declared on or
0:25
scoped to any CSS selector.
0:29
You can define and reset a variable
at different levels of specificity.
0:32
So in the latest project files,
0:35
I have this base class of button for
creating a button set,
0:38
that uses var(--btn-bg) to set
the background color of a button.
0:42
Now the --btn-bg variable and
0:48
value have not been declared anywhere in
the style sheet yet, we'll do that next.
0:50
So instead of defining
the --btn-bg variable
0:55
in the root scope like we've been
doing all along, I'll declare and
0:58
assign the values inside the button
modifier selector given to each button.
1:01
So as you can see in index.html,
1:06
the call out button has the base button
class and a call out class and the learn
1:09
more buttons in the cards also have
the base button class and an info class.
1:14
So first in variables.css,
I'll create a chained class selector
1:21
that targets elements with the class
button and also a class name of callout.
1:27
And here I'll set the value of
the --btn-bg variable to #b13c69.
1:33
Then right below I'll create
a class that targets elements
1:43
with the class button and the class info.
1:48
And here I'll set the --btn-bg
1:53
value to #60a4b3.
1:58
The custom properties are resolved
according to the normal inheritance in
2:02
cascade rules.
2:07
So the browser updates the background
color value of a button
2:08
based on the class or element
the --btn-bg variable is scoped to.
2:12
Scoping custom properties to DOM
elements gives you even more interesting
2:18
possibilities.
2:21
Again, since CSS variables follow
the cascade and inheritance,
2:23
we can style elements based on
where they appear in the HTML.
2:27
In other words,
2:30
we can efficiently set how an element
looks when it's inside of another element.
2:31
For example,
to update the styles of a button
2:36
based on whether it appears inside
an intro div, a card item or
2:39
a modal window, you might create
three descendant selectors like this.
2:43
Well with custom properties,
we can update the styles without
2:48
having to write descendant selectors that
couple your CSS to he DOM structure.
2:52
Like earlier, we declare the regular
CSS properties who's values we wanna
2:56
update inside the base button rule,
like font size and background color.
3:01
So in the base button class,
3:06
I'll add the font size property and
set the value to var and
3:09
specify a custom property
name of --btn-font-size.
3:14
And now I can update how the button
appears inside an intro, card,
3:20
and modal element by setting the custom
property values on those selectors.
3:25
So I'll replace the chained class
selector with the intro class,
3:31
I already have the background set.
3:37
I'll set the --btn-font-size
variable to 1.1em.
3:40
And right below I'll replace
the selector with a class card.
3:47
And set --btn-font-size to 0.85em.
3:54
The page also has a modal window that's
set to display none for now, and
4:02
you can see what it looks like if I
comment out the display property.
4:07
So back in the modal rule,
4:12
I'll set --btn-font-size to 1em,
4:17
and --btn-bg to #e85838.
4:25
So each of these selectors creates
a new context for the variables.
4:31
So now any button descendent of intro,
card, and
4:36
modal can inherit the property
set on their parent selectors.
4:40
So that means I can go over to my HTML and
4:45
remove the extra call out and
info modifier classes from the markup.
4:48
So the call up button will
simply have the class button and
4:54
it's inside the div intro and
then inside each div with a class card,
4:58
I'll remove the info class
from the button inc elements.
5:03
As you can see the custom properties don't
have to know anything about their context.
5:12
And as a result we get this perfectly
themeable and reusable button component.
5:18
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