前言
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另一个好处是语义化的标识。比如,–main-text-color 会比 #00ff00 更易理解,尤其是这个颜色值在其他上下文中也被使用到。
在CSS自定义属性出现之前,CSS变量只能在一些CSS预处理器中使用,如less,scss等
一、变量的声明和使用
CSS选择器不能是数字开头,JS中的变量是不能直接数值的。
但是,在CSS变量中,这些限制通通没有。 但不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文。
1. 声明:大小写敏感, --variable-name: variable-value;
:root{
--color: red;
}
2. 使用:使用var(变量名)来使用一个变量
#div {
color: var(color)
}
注意:
1: CSS变量的定义的值可以任意值或表达式
2:CSS变量之间可互相传递值(如–test1:var(–test))
3:CSS变量不可基于自身再次赋值(如–test:var(–test,#fff)语法是错误的)
4:CSS变量不支持用于媒体查询
3. 变量组合使用
使用变量的时候,通常不会单独使用,可以组合使用
当变量的值是字符串时,可以直接拼接,如下
:root{
--screen-category: 'category' //变量值是字符串
}
body:after {
content: '--screen-category: 'var(--screen-category); // 直接拼接
}
当变量的值是数值时,必须使用calc()函数计算,就算还是简单的单位拼接
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
4. 变量未定义和错误定义
如果我们使用的变量没有定义,则使用后面的值作为元素的属性值, 如下所示
body里面访问不到.box定义的–1,因此使用#cd0000
.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}
使用变量时,若变量已定义且语法无问题,但是变量的值不适用当前属性,则使用缺省值
,如:
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
结果body的颜色是transparent,因为20px虽然语法正确,但不可能做为background-color的属性值,则使用其缺省值就是transparent
二、继承和作用域
1. 作用域
使用:root{}来定义全局css变量
想让变量在局部可用,就定义在某个特定的选择器下
还是下面这段代码
:root{
color: red; //全局可用
}
.box {
--1: #369; //只在.box这个作用域可用
}
body {
background-color: var(--1, #cd0000);
}
2. 继承
<div class="wrapper">
<div class="content1"></div>
<div class="content2"></div>
</div>
.wrapper {
--color: red;
}
.content1 {
--color: yellow;
}
content1的–color为yellow,content2的–color没有定义,继承了wrapper的--color:red
并修改为--color: yellow
,且只在content1的作用域内有效
三、js操作css变量
:root {
--color: red;
}
//读取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue('--color').trim();
console.log(color); // '70px'
//改变
document.documentElement.style.setProperty('--color', 'yellow');
var color = root.getPropertyValue('--color').trim();
console.log(color); // '100px'
//删除
document.documentElement.style.removeProperty('--color');
var color = root.getPropertyValue('--color').trim();
console.log(color); // '70px'
四、与预处理器(sass,less)比较
1. css变量:
动态性,可以在运行时更改
可以方便地从js读写
可继承,可组合,有作用域
2. 预处理器:
预处理器的变量不是动态的,在运行时不可更改
预处理器的变量没有作用域的说法
不能与js交互
五、常用场景
为风格统一而使用颜色变量
一致的组件属性(布局,定位等)
避免代码冗余(响应式布局,制动动画)