CSS variables weren't created just to be the CSS equivalent

of preprocessor variables, or even offer the same functionality as them.

Variables in CSS can do many things you can't do with preprocessor variables.

They each behave differently under certain circumstances.

In fact, it's like they're two different entities and live in separate worlds.

Let's look at why.

You see, preprocessors don't run in the browser.

The variables you declare living a source file in your machine.

Preprocessors just replace variables with static values when they're

compiled to CSS.

The browser knows nothing about the variables and

the variables themselves know nothing about your markup.

On the other hand, CSS variables are entirely more flexible than compiled code.

Because they live in the browser.

When you update a CSS variable's value,

the browser updates it anywhere it's referenced at runtime.

This gives them dynamic capabilities and opens up lots of interesting possibilities

than just replacing colors and font values.

For example, in a preprocessor you can't update the value of a variable from within

a media query.

So in this SAAS example, the headline classes margin-bottom value cannot be

changed to 2rem inside a media query by updating the gutter variable like this.

But you can with CSS variables.

Their values are updated live inside media queries.

For instance, in the latest style sheet for

this video, I see that the gutter variable is scoped to the root element, so

I'm going to change its value from 12 pixels to 1rem.

Then I'll scroll down and give the header a margin-bottom property that reference

the gutter variable as its value.

Also the cards on the page are being laid out with CSS grid via

the main content div.

So I'll add a gutter or gap between the cards.

First I'll target the class main-content and

add a grid-gap property with its value set to the gutter variable.

Now I'll use media queries to provide a new context that updates the value of

the gutter variable without having to respecify any selectors like header and

main content, or any CSS properties inside the media query.

So first I'll create a new media query.

That target devices that are a minimum of 576 pixels.

And here I'll update the value of gutter in the root scope.

So I'll add the root pseudo-class.

And inside that, lets update the value of gutter to 3rem.

Then in the next media query,

I'll once again update the value of gutter inside root.

So I'll simply copy the selector I wrote in the first media query.

Paste it here.

And this time I'll set it to a larger value like 5rem, just so

we can see the changes in the browser.

So notice how I'm only including the root selector scope and the updated variables.

Not the main content and hetero selectors, or

the actual CSS properties that reference the variable.

I'll give this a save.

And as you'll see, the gutter variable is responsive and updates dynamically.

As I resize the browser, the margin values change.

Now have a look at this fun demo I created,

that shows how CSS variables can reset values inside media queries.

This time I'm using a CSS animation of a ball.

As you can see, the ball moves up and down on small screens, then switches to a side

to side animation on medium screens, then a diagonal animation on large screens.

In the CSS for this, the ball rule has a variable called animate,

which calls the bounce keyframe sequence by default.

In the first media query,

the animate variable is set to the slide keyframe sequence,

then it's set to the diagonal sequence in this wider media query context.

You'll find a link to this demo in the teacher's notes of this video.

You can even forward the workspace snapshot and

experiment with the values yourself.

Another example of how CSS variables can be updated and altered dynamically,

is updating their values inline within the style attribute of an element.

For example, the learn more buttons in the cards use the color primary

variable to set their background color.

I'll open up index.html and add a style attribute to one

of the anchor elements with the btn-info class.

And here I'll update the value of the color primary variable,

to let's say, firebrick.

And as you can see, we immediately see the change in the browser.

This is not possible with static preprocessor variables,

because, as I mentioned earlier, they know nothing about your markup.

All right, so in the next video, you'll learn how CSS variables cascade and

inherit their value from their parent.

We'll define and reset variables at different levels of specificity.