最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局。
举个例子,如下html和CSS:
<div>
<div>测试a</div>
<div>测试b</div>
<div>测试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变量给伪元素传参了。
例如,一个多图上传页面,有很多loading进度条,此时,就可以使用CSS变量将加载进度传给伪元素,这样,一个标签就能实现完整的进度效果了,代码简洁又高效,而在过去,我们一定要嵌套HTML标签才能实现。HTML代码如下:
<label>图片1:</label>
<div></div>
<label>图片2:</label>
<div></div>
<label>图片3:</label>
<div></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也越来越具有动态特性了。
本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。
Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。
原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。
JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的
引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。
var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局
解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。
JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象
这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!