自定义属性

介绍

自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(–main-color);）
复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束，并从其父级继承其值。

注意

1. 自定义属性类似于C语言中的#define，可以方便修改全局中重复使用的属性
2. 尊重选择器的优先级（权重）（所以通过var获取时也会先获取权重大的），通常的最佳实践是定义在根伪类 :root （对于 HTML 来说，:root 表示 < html> 元素，除了优先级更高之外，与 html 选择器相同。）下，这样就可以在HTML文档的任何地方访问到它了
3. 自定义属性名是大小写敏感
4. 当变量的值是数值时，必须使用calc()函数计算（纯数字）

---

参考文章：
CSS中的 “var()” 和 “:root”
MDN-var()
CSS var() 函数
MDN-:root
css自定义属性（css变量）
使用CSS自定义属性（变量）