CSS 自定义属性（变量）
CSS 自定义属性（变量）
由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）
声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：
element {--main-bg-color: brown;
}通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：
:root {--main-bg-color: brown;
}如前所述，使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：
element {background-color: var(--main-bg-color);
}//用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换
//语法允许使用逗号。比如 var(--foo, red, blue) 定义了一个 red, blue 的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。.three {background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}.three {background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}备注： 自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。
继承：自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。看这一段 HTML：
在这个情况下， var(--test) 的结果分别是：
- 对于元素
class="two"：10px - 对于元素
class="three"：2em - 对于元素
class="four"：10px（继承自父属性） - 对于元素
class="one"：非法值，会变成自定义属性的默认值
无效值
当浏览器遇到无效的 var() 时，会使用继承值或初始值代替。
考虑如下代码：
HTML
This paragraph is initial black.
CSS
:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
毫不意外，浏览器将 --text-color 的值替换给了 var(--text-color)，但是 16px 并不是 color 的合法属性值。代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤：
- 检查属性 color 是否为继承属性。是，但是
没有任何父元素定义了 color 属性。转到下一步。 - 将该值设置为它的默认初始值，比如 black。
Result
段落颜色并不是蓝色，因为无效代换导致了它被替换成了默认初始值的黑色。如果你直接写 color: 16px 的话，则会导致语法错误，而前面的定义则会生效（段落显示为蓝色）。
备注： 当 CSS 属性 - 值对中存在语法错误，该行则会被忽略。然而如果自定义属性的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。
JavaScript 中的值
在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);