1. Web
  2. CSS
  3. var()

var()

Baseline 已广泛支持

该特性已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 4 月以来，它已在各大浏览器上可用。

var() CSS 函数可用于插入自定义属性（有时称为“CSS 变量”）的值，以代替另一个属性值中的任何部分。

试一试

border-color: var(--color-a);

border-color: var(--color-b);

border-color: var(--color-c);

<section class="default-example" id="default-example">
  <div id="example-element">
    Three color options have been set on the :root use these to change the
    border color.
  </div>
</section>

:root {
  --color-a: pink;
  --color-b: green;
  --color-c: rebeccapurple;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

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

语法

css
/* Basic 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, red);
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: #008800;
}

结果

由于未设置 --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，主体背景色将回退到 --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 Cascading Variables Module Level 1 的自定义属性
# 使用变量

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面由 MDN 贡献者 于 最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.