变量 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

函数 var() CSS

函数 描述
var() 值变量 CSS 插入