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

一、css變量非全局

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

舉個例子，如下html和CSS：

<div>    <div>測試adiv>    <div>測試bdiv>    <div>測試cdiv>div>

.box {    --color: red;    color: var(--color);}.a {    --color: green;    color: var(--color);}.b {    --color: blue;    color: var(--color);}.c {    --color: yellow;}

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

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

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

:root {    --color: red;}

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

body {    --color: red;}

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

.module {    --color: red;}

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

二、CSS變量局部特性用途

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

例如，一個多圖上傳頁面，有很多l(xiāng)oading進(jìn)度條，此時，就可以使用CSS變量將加載進(jìn)度傳給偽元素，這樣，一個標(biāo)簽就能實(shí)現(xiàn)完整的進(jìn)度效果了，代碼簡潔又高效，而在過去，我們一定要嵌套HTML標(biāo)簽才能實(shí)現(xiàn)。HTML代碼如下：

<label>圖片1：label><div>div><label>圖片2：label><div>div><label>圖片3：label><div>div>

我們只需要在style屬性中更新當(dāng)前上傳進(jìn)度變量就可以了。

然后，我們就可以把這個變量轉(zhuǎn)換成我們需要的偽元素數(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計數(shù)器呈現(xiàn)，寬度則可以借助calc()轉(zhuǎn)換成帶px的值。其它一些實(shí)現(xiàn)細(xì)節(jié)不展開，有疑問可以評論，我會解答。

最終實(shí)現(xiàn)的效果如下圖所示：

CSS也越來越具有動態(tài)特性了。

本文完?