这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)

语法

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效,则该函数将使用第二个值。

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

注意:自定义属性的回退值允许使用逗号。例如, var(--foo, red, blue) 将red, blue同时指定为回退值;即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

<custom-property-name> 自定义属性名
在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
<declaration-value> 声明值(回退值)
回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符,但是部分有特殊含义的字符除外,例如换行符、不匹配的右括号(如)]})、感叹号以及顶层分号(不被任何非var()的括号包裹的分号,例如var(--bg-color, --bs;color)是不合法的,而var(--bg-color, --value(bs;color))是合法的)。

示例

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
/* 回退值 */

/* 在父元素样式中 */
.component {
  --text-color: #080; /* header-color 并没有被设定 */
}

/* 在 component 的样式中: */
.component .header {
  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
}

.component .text {
  color: var(--text-color, black);
}

规范

Specification Status Comment
CSS Custom Properties for Cascading Variables Module Level 1
var()
Candidate Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 48[2]
49
29 (29)[1]
31 (31)
未实现 36 9.3[3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 50 29 (29) 未实现 37 9.3[3]

[1] 在 Gecko 29 中这个特性在layout.css.variables.enabled设置中实现的,默认值是 false,并且使用旧的var-variablename语法。Gecko 31 开始这项设置默认是启用的,并且使用了新的--variablename 语法。

[2] Chrome 48 通过 在 chrome://flags中的"Experimental Web Platform features"标签进行启用。 

[3] 查看 WebKit bug 19660.

另请参见

文档标签和贡献者

此页面的贡献者: AnnAngela, xgqfrms-GitHub, hiyangguo
最后编辑者: AnnAngela,