CSS：var變量的局部作用域（繼承）特性

一、css變量非全局

最近做項目，發現css變量一個有意思的特性，那就是變量作用域非全局。

舉個例子，如下html和CSS：

<div>
    <div>測試a</div>
    <div>測試b</div>
    <div>測試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></div>
<label>圖檔2：</label>
<div></div>
<label>圖檔3：</label>
<div></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也越來越具有動态特性了。

本文完〜