CSS 函数 - var()

CSS 中的var()函数用于向自定义属性（也称为 CSS 变量）添加值。除了属性值外，var()函数不能用于属性名称、选择器或任何其他属性。这样做可能会导致无效的语法或无意义的值。

可能的值

var()函数可以具有以下值：

<custom-property-name>：表示变量/自定义属性的名称。

它是一个以两个连字符（--）开头的标识符。
CSS 除了声明的内容外，不会为自定义属性添加任何含义。
自定义属性仅对声明它的作者或用户有用。

<declaration-value>：表示变量/自定义属性的回退值。

在自定义属性无效时很有用。
回退值可以包含任何字符，但具有特殊含义的字符除外，例如换行符、不匹配的闭括号（如）、}、]、顶级分号或感叹号。
它也可以是一个自定义属性，该属性已使用var()函数声明。

语法

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

CSS var() - 在根级别声明自定义属性

以下示例演示了在根级别声明的var()函数的使用。

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>var() example</h1>
   <div></div>
</body>
</html>

在上面的示例中，background-color 使用变量（--body-background-color）声明，并用于 div 元素，以设置 div 的背景颜色。

CSS var() - 在较低级别声明自定义属性

即使在稍后声明自定义属性，也可以获得相同的结果。因此，您可以以以下方式使用相同的示例。

<html>
<head>
<style>
   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }

   :root {
      --body-background-color: peachpuff;
   }
</style>
</head>
<body>
   <h1>var() example</h1>
   <div></div>
</body>
</html>

CSS var() - 最初为自定义属性设置值

在给定的示例中，使用了var()函数，其中设置了变量值，因此未使用回退值。

<html>
<head>
<style>
   /* title-color is set, and so the fallback value (red) will not be set  */
   .title {
      color: var(--title-color, red);
   }

   /* text-color is set, and so the fallback value (black) will not be set  */
   .content-text {
      color: var(--text-color,black);
   }

   div {
      --title-color: black;
      --text-color: blue;
   }
</style>
</head>
<body>
   <div>
      <h1 class="title">Title</h1>
      <p class="content-text">Content</p>
    </div>
</body>
</html>

CSS var() - 设置自定义属性的回退值

在给定的示例中，使用了var()函数，其中未设置变量值，因此使用了回退值。

<html>
<head>
<style>
   /* title-color is not set, and so the fallback value (red) will be set  */
   .title {
      color: var(--title-color, red);
   }

   /* text-color is not set, and so the fallback value (black) will be set  */
   .content-text {
      color: var(--text-color, royalblue);
   }
</style>
</head>
<body>
   <div>
      <h1 class="title">Title</h1>
      <p class="content-text">Content</p>
    </div>
</body>
</html>

CSS var() - 使用自定义属性作为回退值

在给定的示例中，使用了var()函数，其中未设置变量值，因此使用另一个 var() 函数设置了回退值。

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--sample-body-color, var(--body-background-color, pink));
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>var() example</h1>
   <div></div>
</body>
</html>

CSS var() - 使用在另一个文件中设置的自定义属性

以下示例演示了var()函数的使用，其中自定义属性在另一个文件中设置。在此示例中，custom1.css和custom2.css是两个包含 CSS 样式的文件，它们在 html 的<head>部分中被引用。为了便于参考，下面显示了这些 CSS 文件。

显示的代码片段是 custom1.css，其中 var() 函数用于声明变量--main-bg-color作为背景颜色。

/* custom1.css */
div {
   background-color: var(--main-bg-color);
   width: 200px;
   height: 200px;
   border: 3px solid black;
}

显示的代码片段是 custom2.css，其中变量--main-bg-color在根级别赋值为“lightblue”。

/* custom2.css */
:root {
   --main-bg-color: lightblue;
}

在下面给出的示例中，在 custom2.css 文件的根级别赋值的变量被传递到 custom1.css 文件中 div 元素的background-color属性。这些 css 文件链接在 html 中，因此此处将样式应用于 div 元素。因此，div 的背景颜色为“lightblue”。

<html>
<head>
   <link rel="stylesheet" href="custom1.css" />
   <link rel="stylesheet" href="custom2.css" />
</head>
<body>
   <div></div>
</body>
</html>

打印页面