大家好，我是 CUGGZ。

CSS 變量由開發者自定義，它包含的值可以在整個文檔中重復使用。下面就來通過這篇文章來更好地理解聲明式 CSS 變量！

1. 基本使用

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

首先，我們要聲明一個自定義屬性，屬性名以兩個減號（--）開始，屬性值可以是任何有效的CSS值，并且這個屬性和其他屬性一樣可以寫在規則集之內：

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

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

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

除了變量名之外，??var()?? 還有第二個參數——備用值。在發現變量值不可訪問的情況下，將使用備用值來代替它：

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

對于CSS變量的備用值，在替換的過程中，會有四種可能：

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

我們甚至可以在媒體查詢中重新設置變量，這些重新設置的值可以在任何地方使用，這是預處理器變量無法實現的：

<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 代碼成為了可能，因為它們使封裝成為可能。假如我們有一個按鈕，它的 ??class?? 為 flat，代碼如下：

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

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

假如我們想要不同的按鈕有不同的操作，比如紅色的按鈕用于危險操作，那么我們就可以使用 ??danger?? 類來覆蓋對應的樣式聲明：

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

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

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

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;
}

現在想要主題化這個按鈕，只需要定義??--color??變量即可：

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

這樣就相當于將CSS代碼進行了封裝，代碼簡潔了很多~

2. 作用域

我們可以在全局范圍內聲明 CSS 變量，這些變量可以在整個應用程序中使用。也可以在局部范圍內設置 CSS 變量，它只在特定的選擇器中可用。

（1）CSS 全局變量

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

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

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

（2）CSS 局部變量

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

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

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

（3）優先級和繼承

現在我們知道了，如果在根目錄中定義變量，它將是全局變量，如果在選擇器中定義變量，它將是局部變量。那如果在兩個地方都聲明了同一變量，誰的優先級更高呢？

實際上，CSS變量和JavaScript變量類似，CSS 變量中的局部作用域優先于全局作用域。

:root {
  --color: red;
}

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

這里??<h2>??標簽的內容將是橙色的，因為局部變量的優先級比全局變量的優先級更高。

在CSS中是存在繼承的概念的，對于CSS變量也是如此，如果沒有為元素找到變量，它會從其父元素繼承變量值。下面的??<h2>??標簽的內容也將是橙色的，因為??<h2>??在其選擇器中沒有找到 ??--color?? 變量，所以就會在其父級逐級往上查找這個變量：

:root {
  --color: red;
}

body {
  --color: orange;
}

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

3. 注意事項

（1）CSS變量區分大小寫

在定義CSS變量時需要注意，CSS變量的變量名（即屬性名）對大小寫是敏感的，??--my-color?? 和 ??--My-color?? 會被認為是兩個不同的CSS變量。

（2）避免循環依賴

在定義CSS變量時不能出現循環依賴關系，這會導致頁面無法加載：

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

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

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

4. 在 JavaScript 中使用

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

假如我們通過內聯樣式來設置 CSS 變量：

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

可以通過以下代碼來獲取變量值：

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

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

如果在CSS文件中設置CSS變量：

p {
  --color: red;
}

就需要通過以下形式來獲取變量值：

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

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

當然也可以使用這種形式來獲取變量值：

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

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

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

可以通過以下形式使用JavaScript來設置CSS變量：

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

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

5. SASS 變量 vs CSS 變量

下面來看看 CSS 變量出現之前都是如何做的。在CSS變量出現之前開發人員會使用 SASS 變量，它們的目的是相似的，但是不夠流暢和靈活。

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

$main-bg-color: #C92E33;

background-color: $main-bg-color;

SASS 的問題就在于它是一個預處理器，所以，任何在 SASS 中聲明的變量都需要經過編譯才能執行。上面的代碼就會編譯成這樣：

background-color: #C92E33;

這樣才是有效的CSS，代碼經過編譯后，變量也就消失了。因此，我們不能在 CSS 運行時更改變量值。

預處理器中的變量范圍歸結為嵌套的大括號塊。然而，因為 CSS 變量是屬性，所以它們的作用域是基于 DOM 的。這意味著 CSS 變量是按元素解析的，而不是按作用域解析的，來看下面的例子：

body {
  --shadow-color: red;
}

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

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

當我們將鼠標懸停在按鈕上時，按鈕的紅色變為了藍色。那使用預處理器語言 SASS 會是什么結果呢，來看代碼：

body {
 $shadow-color: gray;
}

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

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

這樣就會出現語法錯誤，第六行使用了未定義的變量。因為SASS不知道 ??<button>?? 在 ??<body>?? 里面（因為它不是使用 CSS 在瀏覽器中的 HTML 上下文執行的），也不知道button:hover 是一個按鈕，所以兩個定義的變量都沒有被識別到。

CSS 變量與預處理器變量最重要的區別就是CSS變量是動態分配的。它們在頁面的整個生命周期中保持活動狀態，當更新它們時，所有引用它們的地方都會更新。因為它們是屬性，所以可以通過任何更新 CSS 屬性的機制來更新它們：樣式表、內聯樣式，甚至 JavaScript。

下面是 CSS 變量和 SASS 變量的主要區別：

6. 瀏覽器兼容性

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