強大的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的項目實戰的學習資料都有整理，送給每一位前端小伙伴，每天分享技術