Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using CSS Variables

Well done!

You have completed Using CSS Variables!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Cascade and Inheritance with CSS Variables

5:30 with Guil Hernandez

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.

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