强大的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的项目实战的学习资料都有整理,送给每一位前台小伙伴,每天分享技术
点击:加入
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 强大的CSS:var变量的局部作用域(继承)特性