強大的CSS：var變數的區域性作用域（繼承）特性

一、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變數，卻是有作用域概念的，變數只能作用於自身以及後代元素，兄弟元素，祖先元素都不能享用。

因此，這裡最終的顏色是：綠、藍和紅。如下截圖：

---

所以，如果你的變數是全域性享用的，則建議放在 :root 上，例如：

:root {
    --color: red;
}

當然，也可以使用body或者html標籤：

body {
    --color: red;
}

如果你的變數是區域性享用的，則設定在模組盒子元素上即可。

.module {
    --color: red;
}

實際上，拋開變數這個詞。我們可以理解為具有繼承特性的自定義CSS屬性。

二、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 計數器呈現，寬度則可以藉助 calc() 轉換成帶 px 的值。其它一些實現細節不展開，有疑問可以評論，我會解答。最終實現的效果如下圖所示：

CSS也越來越具有動態特性了。

自己是一個五年的前端工程師,希望本文對你有幫助！

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術