重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

一、CSS变量非全局

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

创新互联公司从2013年创立，是专业互联网技术服务公司，拥有项目网站设计制作、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元易门做网站,已为上家服务,为易门各地企业和个人服务,联系电话:028-86922220

举个例子，如下HTML和CSS：


    测试a

测试b

测试c

.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代码如下：

图片1：

图片2：

图片3：

我们只需要在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的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术

当前文章：强大的CSS：var变量的局部作用域（继承）特性
网页路径：http://cqcxhl.cn/article/iippph.html