CSS var变量的局部作用域(继承)特性

这篇文章发布于 2019年01月26日,星期六,00:51,归类于 CSS相关。 阅读 3587 次, 今日 15 次 4 条评论

 

CSS变量JS设置获取缩略图

一、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变量的局部作用特性,于是,我们可以放心大胆使用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文章:

就这些,感谢阅读!

(本篇完)

分享到:1
×


发表评论(目前4 条评论)

  1. 什么是后出本《css世界》css3版的,好期待说道:

    什么是后出本《css世界》css3版的,好期待

  2. mfk说道:

    以前用1个div。用【:after伪元素+绝对定位+伪元素宽度百分比】实现。

  3. 馒头说道:

    张老师,把他叫成有继承特效的自定义属性好理解一些