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>

列印頁面