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 */
}

规范

浏览器兼容性