大家好，我是 CUGGZ。

CSS 變量由開(kāi)發(fā)者自定義，它包含的值可以在整個(gè)文檔中重復(fù)使用。下面就來(lái)通過(guò)這篇文章來(lái)更好地理解聲明式 CSS 變量！

1. 基本使用

CSS變量即自定義屬性，它包含的值可以在整個(gè)文檔中重復(fù)使用。下面來(lái)看看CSS變量是如何定義和使用的。

首先，我們要聲明一個(gè)自定義屬性，屬性名以兩個(gè)減號(hào)（--）開(kāi)始，屬性值可以是任何有效的CSS值，并且這個(gè)屬性和其他屬性一樣可以寫(xiě)在規(guī)則集之內(nèi)：

:root {
  --main-bg-color: #C92E33;
}

通常，最佳實(shí)踐是將CSS變量定義在根偽類??:root??下，這樣就可以在HTML文檔的任何地方訪問(wèn)到它了。在使用CSS變量時(shí)，使用 ??var()?? 函數(shù)包裹所需變量的變量名即可：

div {
  background-color: var(--main-bg-color)
}

除了變量名之外，??var()?? 還有第二個(gè)參數(shù)——備用值。在發(fā)現(xiàn)變量值不可訪問(wèn)的情況下，將使用備用值來(lái)代替它：

div {
  background-color: var(--main-bg-color, red);
}

對(duì)于CSS變量的備用值，在替換的過(guò)程中，會(huì)有四種可能：

• 瀏覽器不支持 CSS 變量，帶有var()的代碼行將會(huì)被忽略，將使用瀏覽器的默認(rèn)值；
• 瀏覽器支持變量，并且該變量設(shè)置為正確值，則直接使用該變量；
• 瀏覽器支持變量，并且變量未設(shè)置為任何值，則直接使用備用值；
• 瀏覽器支持變量，并且該變量設(shè)置為無(wú)效值，則使用瀏覽器的默認(rèn)值。

我們甚至可以在媒體查詢中重新設(shè)置變量，這些重新設(shè)置的值可以在任何地方使用，這是預(yù)處理器變量無(wú)法實(shí)現(xiàn)的：

<div></div>
<div></div>
<div></div>
<div></div>


:root {
  --width: 25%;
  --margin: 20px;
}

@media (max-width: 400px) {
  :root {
    --width: 50%;
    --margin: 10px;
  }
}

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  flex: 1;
  height: 220px;
  flex-basis: calc(var(--width) - (var(--margin) * 3));
  background: #ccc;
  margin: var(--margin);
}

CSS 變量使重用和自定義 CSS 代碼成為了可能，因?yàn)樗鼈兪狗庋b成為可能。假如我們有一個(gè)按鈕，它的 ??class?? 為 flat，代碼如下：

button.flat {
 border: 1px solid black;
 background: transparent;
 color: black;
}

button.flat:hover {
 background: black;
 color: white;
}

假如我們想要不同的按鈕有不同的操作，比如紅色的按鈕用于危險(xiǎn)操作，那么我們就可以使用 ??danger?? 類來(lái)覆蓋對(duì)應(yīng)的樣式聲明：

button.flat.danger {
 border-color: red;
 color: red;
}

button.flat.danger:hover {
 background: red;
 color: white;
}

如果有很多種顏色和操作，那就需要多次定義樣式來(lái)覆蓋之前的樣式。我們可以使用變量來(lái)替換顏色：

button {
 --color-initial: black;
 border: 1px solid var(--color, var(--color-initial));
 background: transparent;
 color: var(--color, var(--color-initial));
}

button:hover {
 background: var(--color, var(--color-initial));
 color: white;
}

現(xiàn)在想要主題化這個(gè)按鈕，只需要定義??--color??變量即可：

button.flat.danger {
 --color: red;
}

這樣就相當(dāng)于將CSS代碼進(jìn)行了封裝，代碼簡(jiǎn)潔了很多~

2. 作用域

我們可以在全局范圍內(nèi)聲明 CSS 變量，這些變量可以在整個(gè)應(yīng)用程序中使用。也可以在局部范圍內(nèi)設(shè)置 CSS 變量，它只在特定的選擇器中可用。

（1）CSS 全局變量

要在全局范圍內(nèi)聲明變量，就要將變量定義在 :??root?? 選擇器中：

:root {
  --primary-color: #000;
}

h1 {
  color: var(--primary-color);
}

（2）CSS 局部變量

要在局部范圍聲明變量，只需要在選擇器中定義變量即可，這樣聲明的變量只能在該選擇器中使用，如果嘗試在其他地方使用，它不會(huì)有任何效果：

h2 {
  --h2-color: #999;
  color: var(--h2-color);
}

h3 {
  color: var(--h2-color);  /* 不生效 */
}

（3）優(yōu)先級(jí)和繼承

現(xiàn)在我們知道了，如果在根目錄中定義變量，它將是全局變量，如果在選擇器中定義變量，它將是局部變量。那如果在兩個(gè)地方都聲明了同一變量，誰(shuí)的優(yōu)先級(jí)更高呢？

實(shí)際上，CSS變量和JavaScript變量類似，CSS 變量中的局部作用域優(yōu)先于全局作用域。

:root {
  --color: red;
}

h2 {
  --color: orange;
  color: var(--color);
}

這里??<h2>??標(biāo)簽的內(nèi)容將是橙色的，因?yàn)榫植孔兞康膬?yōu)先級(jí)比全局變量的優(yōu)先級(jí)更高。

在CSS中是存在繼承的概念的，對(duì)于CSS變量也是如此，如果沒(méi)有為元素找到變量，它會(huì)從其父元素繼承變量值。下面的??<h2>??標(biāo)簽的內(nèi)容也將是橙色的，因?yàn)??<h2>??在其選擇器中沒(méi)有找到 ??--color?? 變量，所以就會(huì)在其父級(jí)逐級(jí)往上查找這個(gè)變量：

:root {
  --color: red;
}

body {
  --color: orange;
}

h2 {
  color: var(--color);
}

3. 注意事項(xiàng)

（1）CSS變量區(qū)分大小寫(xiě)

在定義CSS變量時(shí)需要注意，CSS變量的變量名（即屬性名）對(duì)大小寫(xiě)是敏感的，??--my-color?? 和 ??--My-color?? 會(huì)被認(rèn)為是兩個(gè)不同的CSS變量。

（2）避免循環(huán)依賴

在定義CSS變量時(shí)不能出現(xiàn)循環(huán)依賴關(guān)系，這會(huì)導(dǎo)致頁(yè)面無(wú)法加載：

--variable_name_1 : var(variable_name_2, fallback);
--variable_name_2 : var(variable_name_1, fallback);

（3）CSS 變量不能是屬性名

不能使用 CSS 中的現(xiàn)有屬性作為 CSS 的變量名。例如，我們不能使用名稱“font-size”來(lái)初始化變量。

4. 在 JavaScript 中使用

使用 CSS 變量的一大好處就是可以在 JavaScript 中訪問(wèn)它。

假如我們通過(guò)內(nèi)聯(lián)樣式來(lái)設(shè)置 CSS 變量：

<p style="--color: red"></p>

可以通過(guò)以下代碼來(lái)獲取變量值：

// 獲取 <p> 元素
const element = document.querySelector('p');

// 檢索CSS變量 --color 
element.style.getPropertyValue('--color'); // 'red'

如果在CSS文件中設(shè)置CSS變量：

p {
  --color: red;
}

就需要通過(guò)以下形式來(lái)獲取變量值：

// 獲取 <p> 元素
const element = document.querySelector('p');

// 獲取CSS變量 --color 
getComputedStyle(element).getPropertyValue('--color'); // 'red'

當(dāng)然也可以使用這種形式來(lái)獲取變量值：

<p style="--color: red"></p>

// 獲取 <p> 元素
const element = document.querySelector('p');

// 獲取CSS變量 --color
getComputedStyle(element).getPropertyValue('--color'); // 'red'

可以通過(guò)以下形式使用JavaScript來(lái)設(shè)置CSS變量：

// 獲取 <p> 元素
const element = document.querySelector('p');

// 將 --color 變量設(shè)置為 blue 
element.style.setProperty('--color', 'blue');

5. SASS 變量 vs CSS 變量

下面來(lái)看看 CSS 變量出現(xiàn)之前都是如何做的。在CSS變量出現(xiàn)之前開(kāi)發(fā)人員會(huì)使用 SASS 變量，它們的目的是相似的，但是不夠流暢和靈活。

SASS 變量在定義時(shí)需在變量名前加上“$”，在使用變量時(shí)直接使用變量名即可：

$main-bg-color: #C92E33;

background-color: $main-bg-color;

SASS 的問(wèn)題就在于它是一個(gè)預(yù)處理器，所以，任何在 SASS 中聲明的變量都需要經(jīng)過(guò)編譯才能執(zhí)行。上面的代碼就會(huì)編譯成這樣：

background-color: #C92E33;

這樣才是有效的CSS，代碼經(jīng)過(guò)編譯后，變量也就消失了。因此，我們不能在 CSS 運(yùn)行時(shí)更改變量值。

預(yù)處理器中的變量范圍歸結(jié)為嵌套的大括號(hào)塊。然而，因?yàn)?CSS 變量是屬性，所以它們的作用域是基于 DOM 的。這意味著 CSS 變量是按元素解析的，而不是按作用域解析的，來(lái)看下面的例子：

body {
  --shadow-color: red;
}

button {
  box-shadow: 1px 1px 1px var(--shadow-color);
}

button:hover {
  --shadow-color: blue;
}

當(dāng)我們將鼠標(biāo)懸停在按鈕上時(shí)，按鈕的紅色變?yōu)榱怂{(lán)色。那使用預(yù)處理器語(yǔ)言 SASS 會(huì)是什么結(jié)果呢，來(lái)看代碼：

body {
 $shadow-color: gray;
}

button {
 box-shadow: 1px 1px 1px $shadow-color;
}

button:hover {
 $shadow-color: blue;
}

這樣就會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤，第六行使用了未定義的變量。因?yàn)镾ASS不知道 ??<button>?? 在 ??<body>?? 里面（因?yàn)樗皇鞘褂?CSS 在瀏覽器中的 HTML 上下文執(zhí)行的），也不知道button:hover 是一個(gè)按鈕，所以兩個(gè)定義的變量都沒(méi)有被識(shí)別到。

CSS 變量與預(yù)處理器變量最重要的區(qū)別就是CSS變量是動(dòng)態(tài)分配的。它們?cè)陧?yè)面的整個(gè)生命周期中保持活動(dòng)狀態(tài)，當(dāng)更新它們時(shí)，所有引用它們的地方都會(huì)更新。因?yàn)樗鼈兪菍傩?，所以可以通過(guò)任何更新 CSS 屬性的機(jī)制來(lái)更新它們：樣式表、內(nèi)聯(lián)樣式，甚至 JavaScript。

下面是 CSS 變量和 SASS 變量的主要區(qū)別：

6. 瀏覽器兼容性

目前，CSS 變量已經(jīng)得到了各大瀏覽器的支持：