CSS var变量的局部作用域特性

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8417

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、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变量，却是有作用域概念的，变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。

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

眼见为实，您可以狠狠地点击这里： CSS变量的局部作用域特性demo

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

:root {
    --color: red;
}

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

body {
    --color: red;
}

如果你的变量是局部享用的，则设置在模块盒子元素上即可。

.module {
    --color: red;
}

二、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 计数器呈现，对计数器还不了解的可以参见“ CSS counter计数器(content目录序号自动递增)详解 ”这篇文章，在 《CSS世界》 这本书中也有详细介绍。

宽度则可以借助 calc() 转换成带 px 的值。其它一些实现细节不展开，有疑问可以评论，我会解答。最终实现的效果如下图所示：

有demo，您可以狠狠地点击这里： CSS变量与上传进度条demo

可见，CSS也越来越具有动态特性了。

三、结束语

CSS变量就像JS的变量，每个类名或者花括号就像一个 function ，里面的变量只有上下文以内可以获取，这就让CSS有了更多可能性。外部变量稍微一边，整个CSS都可以大大联动，且是实时的，很有意思，可以玩的东西很多。不过这里暂不展开，因为困了，明早还有直播。

附上之前写的关于CSS3变量的两个tip文章：

• 小tips:了解CSS/CSS3原生变量var
• 小tips: 如何HTML标签和JS中设置CSS3 var变量

就这些，感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8417

（本篇完）