复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦)。自定义属性在某个地方(通常是全局)存储一个值,然后在其他许多地方引用它,这样可以实现一个修改,全局变更。
另一个好处是语义化的标识(如--main-text-color 会比 #00ff00 更易理解)。

CSS 变量(又称自定义属性)是由工程开发者定义的,可以重复使用的CSS属性值。CSS变量多在全局定义。

CSS变量的声明(定义CSS变量),要求属性名需要以两个减号开始(如 --success-color),属性值则可以是任何有效的 CSS 值。
body {
--success-color: green;
--main-bg-color: brown;
}

CSS变量的使用,要求用 var() 函数加"CSS变量属性名" 来取值。
element {
background-color: var(--main-bg-color);
}

image.png
注意:
自定义属性名是大小写敏感的,--my-color 和 --My-color 会被认为是两个不同的自定义属性。

此外
var(param1[, param2])
var()函数可以使用第二个参数,表示默认值。如果param1指向的变量不存在,就会使用param2所声明的默认值。
第二个参数位置的逗号或空格都视作第二个参数的整体。
image.png

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/nbsemh9k6rwpgfgn


DiracKeeko
128 声望2 粉丝