CSS 變量

CSS 變量

var() 函數用于插入 CSS 變量的值。

CSS 變量可以訪問 DOM，這意味著您可以創建具有局部或全局范圍的變量，使用 JavaScript 來修改變量，以及基于媒體查詢來修改變量。

使用 CSS 變量的一種好方法涉及設計的顏色。您可以將它們放在變量中，而不必一遍又一遍地復制和粘貼相同的顏色。

傳統方式

以下例子顯示了在樣式表中定義一些顏色的傳統方式（通過為每個特定元素定義要使用的顏色）：

實例

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

親自試一試

var() 函數的語法

var() 函數用于插入 CSS 變量的值。

var() 函數的語法如下：

var(name, value)
值 描述
name 必需。變量名（以兩條破折號開頭）。
value 可選。回退值（在未找到變量時使用）。

注釋：變量名稱必須以兩個破折號（--）開頭，且區分大小寫！

var() 如何工作

首先：CSS 變量可以有全局或局部作用域。

全局變量可以在整個文檔中進行訪問/使用，而局部變量只能在聲明它的選擇器內部使用。

如需創建具有全局作用域的變量，請在 :root 選擇器中聲明它。 :root 選擇器匹配文檔的根元素。

如需創建具有局部作用域的變量，請在將要使用它的選擇器中聲明它。

下面的例子與上面的例子相同，但是在這里我們使用 var() 函數。

首先，我們聲明兩個全局變量（--blue 和 --white）。然后，我們使用 var() 函數稍后在樣式表中插入變量的值：

實例

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

親自試一試

使用 var() 有如下優勢：

  • 使代碼更易于閱讀（更容易理解）
  • 使修改顏色值更加容易

如需將藍色和白色改為較柔和的藍色和白色，您只需要修改兩個變量值：

實例

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

親自試一試

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

函數
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函數

函數 描述
var() 插入 CSS 變量的值。