定义
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做一些事情。
