定义

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)');