定义

CSS Variables，也称为CSS变量。由CSS定义的一种实体，可包含指定值，并在整个document中复用。

声明

element {
--custom-color: blue;
}

- 必须以“—”（两个dash）开始变量名称，比如“—custom-color”。

- 大小写敏感。

用法

用var()来获取并使用CSS变量。

element{
background-color: var(--custom-color);
}

这里var的语法是这样的：

var( < custom-property-name > [, < declaration-value > ]? )

第一个参数对应CSS变量的名称，第二个为默认值，如果第一个参数对应的CSS变量未定义，则使用这个默认值。

第二个参数还可以是多个通过逗号分隔的值，与shorthand values不同。

注意点

- CSS变量会从它的父节点继承下来。

- var()不能作为属性名。

- var()不能只作为值的一部分（比如不允许“margin-top: var(—gap)px;”），而必须作为整个值，或者使用calc，比如“margin-top: calc(var(—gap) * 1px);”。

- IE不支持CSS变量。

操作CSS变量

可以通过JavaScript操作CSS变量：

// 获取
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// 设置
document.documentElement.style.setProperty('--primary-color','green');
document.documentElement.style.setProperty('--primary-color','var(--secondary-color)');

黑科技

CSS变量可以包含任何合法的值，比如“—foo: if(x > 5) this.width = 10; ”。虽然对于大部分CSS来说这个值是无效的，但是可以在运行时通过JavaScript做一些事情。

作者：coltfoal
链接：https://www.jianshu.com/p/3b52910b52b2