var()

var() CSS函数，可以用来插入自定义属性的值来代替其他属性的值的任意部分内容。

var(--header-color, blue);

该var()函数不能用于属性名称，选择器或除了属性值之外的其他任何东西。（这样做通常会产生无效的语法，或者是一个其含义与变量无关的值。

语法

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

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

注意：回退的语法（如自定义属性的语法）允许使用逗号。例如，var(--foo, red, blue)定义一个回退值red, blue; 也就是说，第一个逗号和函数结尾之间的任何内容都被认为是回退值。

可能值

<custom-property-name>引用的自定义属性的名称由以两个破折号开头的标识符表示。自定义属性仅供作者和用户使用; CSS将永远不会赋予它们超出此处所述的含义。<declaration-value>后备值，在使用的上下文中自定义属性无效的情况下使用。该值可以包含任何字符，除了一些有特殊含义的字符如换行符，不匹配的右括号，即)，]或者}，顶层分号，或感叹号。

实例

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

body {
  background-color: var(--main-bg-color);
}

/* Fallback */
/* In the component’s style: */
.component .header {
  color: var(--header-color, blue);
}

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

/* In the larger application’s style: */
.component {
  --text-color: #080; /* header-color isn’t set, and so remains blue, the fallback value */
}

规范

Specification	Status	Comment
CSS Custom Properties for Cascading Variables Module Level 1The definition of 'var()' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	482 49	29 (29)1 31 (31)	No support	36	9.33

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	50	29 (29)	No support	37	9.33

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18