Vue超好玩的新特性：在CSS中引入JS變量
幻想
以前做項目的時候經常會這么想：
{{ color }}
復制代碼當然，想想也知道不可能，JS和CSS隸屬不同上下文，CSS哪來的this呢？
那么怎么才能在CSS中使用JS變量呢？那就只能用JS操作DOM然后把變量塞進style里了，比如用ref獲取到DOM元素，然后dom.style.color = this.color。
或者在模板里：
:style
="{ color }">Vue
復制代碼不過這種方式還是有缺陷的，比如本來就不推薦把樣式寫在style屬性里，還有就是變量復用會很麻煩，比如一組DOM元素都想用這個變量，那就不得不給這一組起個類名，然后再在mounted里面document.getElementsByClassName()，獲取到DOM集合之后還要循環(huán)遍歷每個元素，為其加上dom.style.color = this.color，浪費了很多的性能。
其實CSS本身有很多缺陷，并不圖靈完備，所以才導致了各種預處理器的出現：Sass、Less、Stylus等……
它們?yōu)镃SS提供了很多特性：循環(huán)、條件語句、變量、函數等……
其中有個特性非常有用，那就是變量！于是CSS也引入了變量的這個概念，自從有了CSS變量，很多事情真的方便了許多，通過JS操作CSS變量，然后再在需要的地方使用CSS變量，這種方法比之前的高效得多。
什么是CSS變量
在JS里(不止JS，所有語言都差不多)，變量有如下幾個特性：
聲明
使用
作用域
聲明
為了方便理解，咱們通過用JS的方式來類比：
var color = 'red';
在CSS中等同于：
--color: red;
當然這點跟JS不太一樣，但是如果你學PHP這類語言或者Sass的話應該就很好理解了，在PHP或Sass中，聲明變量的時候沒有一個關鍵字，而是在變量名的第一位加上一個美元符號$，這就代表聲明變量了。
PHP:
$color = 'red';
復制代碼Sass:
$color: color;
復制代碼但是$符號被Sass占用了，@符號被less占了，所以CSS只能想出別的符號了，CSS的符號就是兩個減號--
使用
光聲明一個變量是沒有什么太大意義的，只有使用了它，這個變量才算有價值：
JS:
console.log(color)
復制代碼可以看到var只是個聲明變量的關鍵字，color才是變量名。
PHP:
echo $color;
復制代碼Scss:
h1 {
color: $color;
}
復制代碼但是在PHP或Sass中，聲明變量的時候帶著$，用的時候也得帶著$。
這就令許多開發(fā)者感到困惑，所以CSS在使用變量的時候用到了一個函數叫var()：
CSS:
h1 {
color: var(--color);
}
復制代碼雖然和PHP、Sass一樣，調用時要帶著前綴(因為那就是變量名的一部分)，但是不一樣的是需要用一個**var()**來把變量包裹起來。
作用域
這個很好理解，不僅JS里有作用域，CSS里也有作用域，比如：
JS:
var color = 'red';
function h1 () {
console.log(color);
}
function div () {
var color = 'blue';
console.log(color);
}
h1(); // red
div(); // blue
復制代碼類似于 CSS 里的：
body {
--color: red;
}
h1 {
color: var(--color); /** 這里獲取到的是全局聲明的變量，值為red **/
}
div {
--color: blue;
color: var(--color); /** 這里獲取到的是局部聲明的變量，值為blue **/
}
復制代碼也就是說，變量的作用域就是它所在的選擇器的有效范圍。
中文CSS變量
有一次我看到了兩個腦洞大開的庫，才發(fā)現CSS變量還可以這么玩：
chinese-gradient
chinese-layout
從他倆的名字就可以看出，都是用chinese開頭的，那么大概率就是用中文做的CSS變量，點進去一看果不其然。
也就是說CSS變量的包容性很強，不像以往編程的時候都必須是英文命名，中文這次居然也可以完美運行，不信咱們來試一下：
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
</span>Document<span style="color: navy;">
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
復制代碼運行結果：
也就是說，CSS變量可以這樣定義：
body {
--藍綠色: aquamarine;
}
復制代碼然后調用的時候：
h1 {
color: var(--藍綠色);
}
復制代碼在vue中的變量
那么怎樣才能在 vue3 的
復制代碼
還記得文章一開始寫的幻想中的組件是什么樣嗎：
復制代碼但是就算vue再牛它也不可能給CSS安個this啊，除非再做一個什么預處理器，不過這次利用CSS變量已經可以很接近咱們幻想中的組件啦：
復制代碼首先要在vars="{}"，再在大括號里寫上你在data中聲明過的值。
如果有多個變量的話，變量之間需要使用逗號進行分隔：
Vue
復制代碼再來試一下這個變量是不是響應式的，動態(tài)改變
復制代碼
運行結果：
可以看到每300毫秒我們就改變一下 this.opacity 的值，它會映射到 CSS 變量上去，this.opacity 變了，--opacity 的值就會隨之變化，視圖也會隨著數據的更新而相應的更新，這個特性簡直太棒了！
腦洞大開
既然chinese-gradient和chinese-layout這兩個CSS庫驗證了CSS中文變量的可行性，而且我記得對象的屬性也是可以寫中文的，那么咱們就來試一下在vue中能不能用這種黑魔法來寫中文：
Vue
復制代碼運行結果：
居！然！成！功！了！
以后大家不會命名的話也別用漢語拼音了，直接寫中文吧哈哈！后續(xù)維護的時候一看變量名就能一目了然(不過還是推薦用英文)。
原理
猜也能猜到，大概率是用到了類似于dom.style.setProperty('--opacity', this.opacity)之類的方法，按下f12打開控制臺一看，果不其然，它控制的是組件元素的style屬性：
不過我們剛才在
復制代碼
運行結果：
可以看到Vue把CSS變量也編譯了一個和data-v-后面的那串隨機字符一樣的：
那么問題來了，假如我要是在全局樣式里定義了一個--color屬性，我在帶有scoped屬性的組件里想用這個全局的 CSS 變量，可是一旦在scoped中使用CSS變量就會被編譯成：--62a9ebed-color，可是全局定義的不是--62a9ebed-color而是--color，這樣就會出現找不到全局屬性的局面，這個問題要怎么解決呢？其實也很簡單，只需要在--的后面加上一個global:就可以了：
復制代碼這樣編譯出來的CSS就會變成：var(--color)啦！
結語
怎么樣是不是很好玩？Vue這次更新誠意滿滿，不過大家都把關注點放在了 Composition-API 上了，沒有注意到這些不起眼的邊邊角角，但就是這些邊邊角角卻可以極大的提高我們的開發(fā)體驗。
對了，CSS變量也是有兼容性的:
從caniuse網站上可以看到，它是不兼容IE的，使用的時候記得確認一下自己項目需要兼容的范圍。
更新
目前該文中的語法已被尤雨溪進行了修改，新語法請看《Vue 3.0.3 : 新增CSS變量傳遞以及最新的Ref提案》
??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關注公眾號
前端名獅，回復「1」加入前端交流群，一起學習進步！3.也可添加微信【qq1248351595】，一起成長。
“在看轉發(fā)”是最大的支持