Local scope (inheritance) features of CSS var variables

One, CSS variables are not global

I recently worked on a project and found that an interesting feature of CSS variables is that the scope of variables is not global.

For example, the following HTML and CSS:

<div class="box">
    <div class="a">测试a</div>
    <div class="b">测试b</div>
    <div class="c">测试c</div>
</div>

.box {
    --color: red;
    color: var(--color);
}
.a {
    --color: green;
    color: var(--color);
}
.b {
    --color: blue;
    color: var(--color);
}
.c {
    --color: yellow;
}

Although the entire CSS shares a context document, there is a concept of scope for CSS variables. Variables can only act on themselves and descendant elements, sibling elements, and ancestor elements cannot be enjoyed.

Therefore, the final colors here are: green, blue and red. The following screenshot:

Variable and text color screenshot

Seeing is believing, you can click here fiercely: The local scope of CSS variables demo

Therefore, if your variables are used globally, it is recommended to put them :rooton, for example:

:root {
    --color: red;
}

Of course, you can also use body or html tags:

body {
    --color: red;
}

If your variables are used locally, just set them on the module box element.

.module {
    --color: red;
}

In fact, put aside the word variable. We can understand it as a custom CSS property with inherited characteristics.

Second, the use of CSS variable local characteristics

Because of the local effect of CSS variables, we can safely use CSS variables to pass parameters to pseudo-elements.

For example, a multi-image upload page has many loading progress bars. At this time, CSS variables can be used to pass the loading progress to the pseudo-element. In this way, a label can achieve a complete progress effect. The code is concise and efficient. In the past, we had to nest HTML tags to achieve this. The HTML code is as follows:

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>

We only need to update the current upload progress variable in the style attribute.

Then, we can convert this variable into the value and width of the pseudo element we need. The CSS code is as follows:

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    display: block;
    width: calc(300px * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

The CSS border value can remember the countercounter presentation. For those who don't know about the counter, please refer to the article " CSS counter (content catalog number auto-increment) detailed explanation ", which is also introduced in detail in the book "CSS World" .

The width can be calc()converted into a band pxvalue with the help of. Some other implementation details will not be expanded. If you have any questions, you can comment and I will answer. The final effect is shown in the figure below:

Upload progress bar effect realized by single label and variable

There is a demo, you can click here: CSS variables and upload progress bar demo

It can be seen that CSS is becoming more and more dynamic.

Three, conclusion

CSS variables are like JS variables. Each class name or curly brace is like one function. The variables inside can only be accessed within the context, which gives CSS more possibilities. With a little bit of external variables, the entire CSS can be greatly linked, and it is real-time, which is very interesting, and there are many things to play with. But I will not start here for the time being, because I am sleepy, and there will be live broadcast tomorrow morning.

Attach two tip articles about CSS3 variables that I wrote before:

That's it, thanks for reading!