強(qiáng)大的CSS：var變量的局部作用域（繼承）特性

一、CSS變量非全局

最近做項(xiàng)目，發(fā)現(xiàn)CSS變量一個(gè)有意思的特性，那就是變量作用域非全局。

舉個(gè)例子，如下HTML和CSS：

<div class="box">
    <div class="a">測(cè)試a</div>
    <div class="b">測(cè)試b</div>
    <div class="c">測(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;
}

雖然整個(gè)CSS公用一個(gè)上下文文檔，但是，對(duì)于CSS變量，卻是有作用域概念的，變量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。

因此，這里最終的顏色是：綠、藍(lán)和紅。如下截圖：

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

:root {
    --color: red;
}

當(dāng)然，也可以使用body或者h(yuǎn)tml標(biāo)簽：

body {
    --color: red;
}

如果你的變量是局部享用的，則設(shè)置在模塊盒子元素上即可。

.module {
    --color: red;
}

實(shí)際上，拋開(kāi)變量這個(gè)詞。我們可以理解為具有繼承特性的自定義CSS屬性。

二、CSS變量局部特性用途

由于CSS變量的局部作用特性，于是，我們可以放心大膽使用CSS變量給偽元素傳參了。

例如，一個(gè)多圖上傳頁(yè)面，有很多l(xiāng)oading進(jìn)度條，此時(shí)，就可以使用CSS變量將加載進(jìn)度傳給偽元素，這樣，一個(gè)標(biāo)簽就能實(shí)現(xiàn)完整的進(jìn)度效果了，代碼簡(jiǎn)潔又高效，而在過(guò)去，我們一定要嵌套HTML標(biāo)簽才能實(shí)現(xiàn)。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屬性中更新當(dāng)前上傳進(jìn)度變量就可以了。

然后，我們就可以把這個(gè)變量轉(zhuǎn)換成我們需要的偽元素?cái)?shù)值以及寬度大小，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邊框數(shù)值可以記住 counter 計(jì)數(shù)器呈現(xiàn)，寬度則可以借助 calc() 轉(zhuǎn)換成帶 px 的值。其它一些實(shí)現(xiàn)細(xì)節(jié)不展開(kāi)，有疑問(wèn)可以評(píng)論，我會(huì)解答。最終實(shí)現(xiàn)的效果如下圖所示：

CSS也越來(lái)越具有動(dòng)態(tài)特性了。

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

這里推薦一下我的前端學(xué)習(xí)交流扣qun：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁(yè)，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)