一文帶你玩轉 CSS 變量
CSS 變量是由 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不知道在 里面(因為它不是使用 CSS 在瀏覽器中的 HTML 上下文執行的)，也不知道button:hover 是一個按鈕，所以兩個定義的變量都沒有被識別到。
CSS 變量與預處理器變量最重要的區別就是CSS變量是動態分配的。它們在頁面的整個生命周期中保持活動狀態，當更新它們時，所有引用它們的地方都會更新。因為它們是屬性，所以可以通過任何更新 CSS 屬性的機制來更新它們：樣式表、內聯樣式，甚至 JavaScript。
下面是 CSS 變量和 SASS 變量的主要區別：
6、 瀏覽器兼容性
目前，CSS 變量已經得到了各大瀏覽器的支持：
