CSS var變數的區域性作用域特性
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8417
本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
一、CSS變數非全域性
最近做專案，發現CSS變數一個有意思的特性，那就是變數作用域非全域性。
舉個例子，如下HTML和CSS：
<div class="box"> <div class="a">測試a</div> <div class="b">測試b</div> <div class="c">測試c</div> </div>
.box {
--color: red;
color: var(--color);
}
.a {
--color: green;
color: var(--color);
}
.b {
--color: blue;
color: var(--color);
}
.c {
--color: yellow;
}
雖然整個CSS公用一個上下文文件，但是，對於CSS變數，卻是有作用域概念的，變數只能作用於自身以及後代元素，兄弟元素，祖先元素都不能享用。
因此，這裡最終的顏色是：綠、藍和紅。如下截圖：
眼見為實，您可以狠狠地點選這裡： CSS變數的區域性作用域特性demo
所以，如果你的變數是全域性享用的，則建議放在 :root 上，例如：
:root {
--color: red;
}
當然，也可以使用body或者html標籤：
body {
--color: red;
}
如果你的變數是區域性享用的，則設定在模組盒子元素上即可。
.module {
--color: red;
}
二、CSS變數區域性特性用途
由於CSS變數的區域性作用特性，於是，我們可以放心大膽使用CSS變數給偽元素傳參了。
例如，一個多圖上傳頁面，有很多loading進度條，此時，就可以使用CSS變數將載入進度傳給偽元素，這樣，一個標籤就能實現完整的進度效果了，程式碼簡潔又高效，而在過去，我們一定要巢狀HTML標籤才能實現。HTML程式碼如下：
<label>圖片1：</label> <div class="bar" style="--percent: 60;"></div> <label>圖片2：</label> <div class="bar" style="--percent: 40;"></div> <label>圖片3：</label> <div class="bar" style="--percent: 20;"></div>
我們只需要在style屬性中更新當前上傳進度變數就可以了。
然後，我們就可以把這個變數轉換成我們需要的偽元素數值以及寬度大小，CSS程式碼如下：
.bar {
height: 20px; width: 300px;
background-color: #f5f5f5;
}
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
display: block;
width: calc(300px * var(--percent) / 100);
font-size: 12px;
color: #fff;
background-color: #2486ff;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
CSS邊框數值可以記住 counter 計數器呈現，對計數器還不瞭解的可以參見“ CSS counter計數器(content目錄序號自動遞增)詳解 ”這篇文章，在 《CSS世界》 這本書中也有詳細介紹。
寬度則可以藉助 calc() 轉換成帶 px 的值。其它一些實現細節不展開，有疑問可以評論，我會解答。最終實現的效果如下圖所示：
有demo，您可以狠狠地點選這裡： CSS變數與上傳進度條demo
可見，CSS也越來越具有動態特性了。
三、結束語
CSS變數就像JS的變數，每個類名或者花括號就像一個 function ，裡面的變數只有上下文以內可以獲取，這就讓CSS有了更多可能性。外部變數稍微一邊，整個CSS都可以大大聯動，且是實時的，很有意思，可以玩的東西很多。不過這裡暫不展開，因為困了，明早還有直播。
附上之前寫的關於CSS3變數的兩個tip文章：
就這些，感謝閱讀！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8417
（本篇完）