CSS: var local scope variables (inherited) characteristics

A, CSS variables non-global

A recent project, CSS variables found an interesting characteristic, that is, the non-global variable scope.

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 context of a CSS document public, but for CSS variables, but there is a scope concept, variables can only act on their own and descendent elements, siblings, ancestors element can not enjoy.

So here is the ultimate color: green, blue and red. The following screenshot:

---

So, if you enjoy variables are global, it is recommended to put :rooton, for example:

:root {
    --color: red;
}

Of course, also possible to use body or html tags:

body {
    --color: red;
}

If your variables are local to enjoy, set the box on the module elements can be.

.module {
    --color: red;
}

In fact, aside variable word. We can be understood as a custom CSS properties inherited characteristics.

Two, CSS characteristic variable local use

Since the characteristics of the local effects of CSS variables, so we can safely use the CSS pseudo-element variables to pass a parameter.

For example, a multi-map upload page, there are a lot of loading progress bar, this time, you can use CSS variables passed to the loading progress pseudo-element, so that a label will be able to realize the full effect of the schedule, the code is simple and efficient, and in In the past, we must be nested HTML tags can be achieved. 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 just need to update the current progress of the upload variable in a style attribute on it.

Then, we can convert this value into a variable size and the width of the dummy elements we need, 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;
}

web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

CSS values can remember frame countercounter presented by the width can be calc()converted into a band pxvalues. Some other implementation details are not expanded, have questions, you can comment and I'll answer. The final effect achieved as shown below:

CSS has become increasingly dynamic nature of the.