强大的CSS：var变量的局部作用域（继承）特性

一、CSS变量非全局

最近做项目，发现CSS变量一个有意思的特性，那就是变量作用域非全局。

举个例子，如下HTML和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;}

尽管整个CSS公用一个上下文文档，但是，对于CSS变量，却是有作用域概念的，变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。

因而，这里最终的颜色是：绿、蓝和红。如下截图：

所以，假如你的变量是全局享用的，则建议放在:root上，例如：

:root {    --color: red;}

当然，也可以使用body或者者html标签：

body {    --color: red;}

假如你的变量是局部享用的，则设置在板块盒子元素上就可。

.module {    --color: red;}

实际上，抛开变量这个词。我们可以了解为具备继承特性的自己设置CSS属性。

二、CSS变量局部特性用途

因为CSS变量的局部作用特性，于是，我们可以放心大胆使用CSS变量给伪元素传参了。

例如，一个多图上传页面，有很多loading进度条，此时，即可以使用CSS变量将加载进度传给伪元素，这样，一个标签就能实现完整的进度效果了，代码简洁又高效，而在过去，我们肯定要嵌套HTML标签才能实现。HTML代码如下：

<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>

我们只要要在style属性中升级当前上传进度变量即可以了。

而后，我们即可以把这个变量转换成我们需要的伪元素数值以及宽度大小，CSS代码如下：

.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;}

CSS边框数值可以记住counter计数器呈现，宽度则可以借助calc()转换成带px的值。其它少量实现细节不开展，有疑问可以评论，我会解答。最终实现的效果如下图所示：

CSS也越来越具备动态特性了。

自己是一个五年的前台工程师,希望本文对你有帮助！

这里推荐一下我的前台学习交流扣qun：731771211 ，里面都是学习前台的，假如你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前台学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到手机端HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，每天分享技术

点击：加入