强大的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代码如下:
我们只需要在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变量的局部作用域(继承)特性
URL地址:http://myzitong.com/article/iippph.html