CSS 變數 - var() 函式
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() 函式的第一個瀏覽器版本。
| 函式 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函式
| 屬性 | 描述 |
|---|---|
| var() | 插入 CSS 變數的值 |
