var()

基线 广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本上运行。它自 2017 年 4 月.

该 var() CSS 函数 可用于插入 自定义属性（有时称为“CSS 变量”）的值，而不是任何其他属性值的任何部分。

试一试

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

语法

css
/* Simple usage */
var(--custom-prop);

/* With fallback */
var(--custom-prop,);  /* empty value as fallback */
var(--custom-prop, initial); /* initial value of the property as fallback */
var(--custom-prop, #FF0000);
var(--custom-prop, var(--default-value));
var(--custom-prop, var(--default-value, red));

该函数的第一个参数是将要替换的自定义属性的名称。该函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性未定义或等于 CSS 范围关键字，则该函数将使用第二个值。

回退的语法，与自定义属性一样，允许使用逗号。例如，var(--foo, red, blue) 定义了一个 red, blue 的回退；也就是说，第一个逗号到函数末尾之间的任何内容都被视为回退值。

值

<custom-property-name>

自定义属性的名称，由一个以两个连字符开头的标识符表示。自定义属性仅供作者和用户使用；CSS 永远不会赋予它们超出此处介绍的意义的意义。

<declaration-value>

自定义属性的回退值，用于在自定义属性未定义或等于 CSS 范围关键字 的情况下使用。此值可以包含除某些具有特殊含义的字符之外的任何字符，例如换行符、不匹配的结束括号，即 )、] 或 }、顶层分号或感叹号。回退值本身可以使用 var() 语法作为自定义属性。如果省略回退值，并且未定义自定义属性，则 var() 函数将解析为 无效值。

注意： var(--a,) 是有效的，指定如果 --a 自定义属性未定义或等于 CSS 范围关键字，则 var() 应该替换为空。

正式语法

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

示例

使用在 :root 上设置的自定义属性

CSS

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

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

结果

此处，background-color 属性的值已通过自定义属性 --main-bg-color 设置。因此 HTML 主体的背景颜色将为粉色。

在设置自定义属性之前使用它

CSS

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

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

结果

在本例中，即使自定义属性是在后面设置的，HTML 主体的背景颜色也将为粉色。

使用在另一个文件中设置的自定义属性

HTML

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="1.css" />
    <link rel="stylesheet" href="2.css" />
  </head>
  <body></body>
</html>

CSS

css
/* 1.css */
body {
  background-color: var(--main-bg-color);
}
css
/* 2.css */
:root {
  --main-bg-color: pink;
}

结果

在本例中，即使自定义属性是在另一个文件中声明的，HTML 主体的背景颜色也将为粉色。

用于在未设置属性时使用的带回退的自定义属性

HTML

html
<div class="component">
  <h1 class="header">Header</h1>
  <p class="text">Text</p>
</div>

CSS

css
/* In the component's style: */
.component .header {
  /* header-color isn't set, and so remains blue, the fallback value */
  color: var(--header-color, blue);
}

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

/* In the larger application's style: */
.component {
  --text-color: #080;
}

结果

由于 --header-color 未设置，因此文本“Header”将为蓝色，即回退值。

使用自定义属性作为回退

CSS

css
:root {
  --backup-bg-color: teal;
}

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

结果

由于 --main-bg-color 未设置，因此主体的 background-color 将回退到 --backup-bg-color，即青色。

无效值

var() 函数在以下情况下可能解析为无效值：

  • 自定义属性未定义且未提供回退值。
  • 自定义属性已定义，但其值对于使用它的属性来说是无效值。

发生这种情况时，该属性将被视为具有值 unset。这是因为变量不能像其他语法错误那样“尽早失败”，因此当用户代理意识到属性值无效时，它已经丢弃了其他级联值。

例如

HTML

html
<p class="p1">Undefined variable</p>
<p class="p2">Invalid variable</p>
<p class="p3">Invalid literal color</p>

CSS

css
p {
  color: red;
}

.p1 {
  color: var(--invalid-color);
}

.p2 {
  --invalid-color: 20px;
  color: var(--invalid-color);
}

.p3 {
  color: 20px;
}

结果

注意使用var() 的段落如何重置为默认黑色，而使用无效文字颜色的段落仍然是红色，因为color: 20px声明被简单地忽略了。

规范

规范
级联变量的 CSS 自定义属性模块级别 1
# 使用变量

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅