# CSS 自定义属性:基础篇

CSS 自定义属性也称自定义变量,相信很多人都用过Sass、Less等预编译语言的变量定义,CSS 自定义属性有些类似。

自定义属性由--开头,调用使用var(),如:

自定义属性遵从标准的作用域和级联规则,设置全局变量可以使用伪元素:root,如:

:root {
	--bg-color: #fff;
}

定义的变量需要配合var()来解析,var() 可以接收第二个参数作为缺省值,如:

.box {
	background-color: var(--bg-color, gray);
}

注意:如果你想把另一个自定义属性作为缺省值,语法应该是 background-color: var(--bg-color, var(--default-color))

CSS 少不了会有一些计算,如果每次修改某个属性,都要去修改相关联的一些属性,这样操作就很麻烦,CSS3中新增了calc()函数实现计算,自定义属性结合calc()计算会更加强大。如标准盒子模型计算宽高:

像JS可以操作CSS属性一样,也可以操作自定义属性,使用 getPropertyValue 和 setProperty 方法操作可以获取和设置自定义属性的值。

CSS自定义属性与预编译语言Sass、Less等是不一样的,预编译语言最终都要生成CSS去执行,而自定义属性本身就是CSS的属性,是在运行时执行的,也就是动态的变量,这对于一些JS交互操作是很有用的。