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.