Cascading CSS variables is unclear

HTML-CSS
1

Hi!

In the lecture:
https://learn.freecodecamp.org/responsive-web-design/basic-css/cascading-css-variables

“When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading.”

I did not understand this description at all. Could anyone break this into more understandable pieces?

Regards

2

Suppose you have a div with the container class. In the CSS, you declared a variable for .container:

.container {
  --main-color: red;
}

Now in the HTML, if you have elements inside that .container div, those inner elements will also have access to that variable. Suppose you have

<div class="container">
  <p>This is some text.</p>
</div>

Since that <p> is nested in .container, it has access to the --main-color variable, and so you can do this:

.container {
  --main-color: red;
}

.container p {
  /* Has access to --main-color because p is nested in .container in the HTML */
  color: var(--main-color);
}
1 Like
3

Big Thanks! This example should be put into the very lecture itself.

So, based on your example, i change the definition of cascading as follows:

The word “cascading” means a process, where information is successively passed on. In CSS context, the information we refer to is the CSS variable. In other words, CSS variable is successively passed on. But to where?
When a CSS variable is defined for HTML element X (i.e. a div), it is accessible for X (the div) and any elements nested within X (the div). So, CSS variable is passed on to the element X and any elements within X. Then comes your example completing the definition of cascading.