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