CSS 函数

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() 例子</h1>
   <div></div>
</body>
</html>

在上面的示例中，背景颜色为使用变量 (--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() 例子</h1>
   <div></div>
</body>
</html>

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

在给定的示例中，使用了 var() 函数其中设置了变量值，因此不使用后备值:

<html>
<head>
<style>
   /* title-color 已设置，因此不会设置后备值（红色）  */
   .title {
      color: var(--title-color, red);
   }

   /* 设置了文本颜色，因此不会设置后备值（黑色） */
   .content-text {
      color: var(--text-color,black);
   }

   div {
      --title-color: black;
      --text-color: blue;
   }
</style>
</head>
<body>
   <div>
      <h1 class="title">标题</h1>
      <p class="content-text">内容yxjc</p>
    </div>
</body>
</html>

CSS var(): 设置自定义属性的后备值

在给定的示例中，var()在未设置变量值的情况下使用函数，因此使用后备值:

<html>
<head>
<style>
   /* title-color 未设置，因此将设置后备值（红色） */
   .title {
      color: var(--title-color, red);
   }

   /* text-color 未设置，因此将设置后备值（royalblue） */
   .content-text {
      color: var(--text-color, royalblue);
   }
</style>
</head>
<body>
   <div>
      <h1 class="title">标题</h1>
      <p class="content-text">内容</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() 例子</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;
}

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

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