Vue超好玩的新特性：在CSS中引入JS變量
授權(quán)轉(zhuǎn)載自:?手撕紅黑樹
https://juejin.im/post/6856668819344392206
幻想
以前做項目的時候經(jīng)常會這么想：
<template>
??<h1>{{?color?}}h1>
template>
<script>
export?default?{
??data?()?{
????return?{
????????color:?'red'
????}
??}
}
script>
<style>
h1?{
??color:?this.color;
}
style>
當然，想想也知道不可能，JS和CSS隸屬不同上下文，CSS哪來的this呢？
那么怎么才能在CSS中使用JS變量呢？那就只能用JS操作DOM然后把變量塞進style里了，比如用ref獲取到DOM元素，然后dom.style.color = this.color。
或者在模板里：
<template>
??<h1?:style="{?color?}">Vueh1>
template>
<script>
export?default?{
??data?()?{
????return?{
????????color:?'red'
????}
??}
}
script>
不過這種方式還是有缺陷的，比如本來就不推薦把樣式寫在style屬性里，還有就是變量復用會很麻煩，比如一組DOM元素都想用這個變量，那就不得不給這一組起個類名，然后再在mounted里面document.getElementsByClassName()，獲取到DOM集合之后還要循環(huán)遍歷每個元素，為其加上dom.style.color = this.color，浪費了很多的性能。
其實CSS本身有很多缺陷，并不圖靈完備，所以才導致了各種預處理器的出現(xiàn)：Sass、Less、Stylus等……
它們?yōu)镃SS提供了很多特性：循環(huán)、條件語句、變量、函數(shù)等……
其中有個特性非常有用，那就是變量！于是CSS也引入了變量的這個概念，自從有了CSS變量，很多事情真的方便了許多，通過JS操作CSS變量，然后再在需要的地方使用CSS變量，這種方法比之前的高效得多。
什么是CSS變量
在JS里(不止JS，所有語言都差不多)，變量有如下幾個特性：
聲明 使用 作用域
聲明
為了方便理解，咱們通過用JS的方式來類比：
var color = 'red';
在CSS中等同于：
--color: red;
當然這點跟JS不太一樣，但是如果你學PHP這類語言或者Sass的話應該就很好理解了，在PHP或Sass中，聲明變量的時候沒有一個關(guān)鍵字，而是在變量名的第一位加上一個美元符號$，這就代表聲明變量了。
PHP:
$color?=?'red';
Sass:
$color: color;
但是$符號被Sass占用了，@符號被less占了，所以CSS只能想出別的符號了，CSS的符號就是兩個減號--
使用
光聲明一個變量是沒有什么太大意義的，只有使用了它，這個變量才算有價值：
JS:
console.log(color)
可以看到var只是個聲明變量的關(guān)鍵字，color才是變量名。
PHP:
echo?$color;
Scss:
h1 {
color: $color;
}
但是在PHP或Sass中，聲明變量的時候帶著。
這就令許多開發(fā)者感到困惑，所以CSS在使用變量的時候用到了一個函數(shù)叫var()：
CSS:
h1?{
????color:?var(--color);
}
雖然和PHP、Sass一樣，調(diào)用時要帶著前綴(因為那就是變量名的一部分)，但是不一樣的是需要用一個**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ā)現(xiàn)CSS變量還可以這么玩：
chinese-gradient chinese-layout
從他倆的名字就可以看出，都是用chinese開頭的，那么大概率就是用中文做的CSS變量，點進去一看果不其然。
也就是說CSS變量的包容性很強，不像以往編程的時候都必須是英文命名，中文這次居然也可以完美運行，不信咱們來試一下：
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<title>Documenttitle>
??
??<link?rel="stylesheet"?href="https://cdn.jsdelivr.net/npm/chinese-layout">
??
??<link?rel="stylesheet"?href="https://cdn.jsdelivr.net/npm/chinese-gradient">
??<style>
????/*?清除默認樣式?*/
????*?{?padding:?0;?margin:?0?}
????ul?{?list-style:?none?}
????/*?全屏顯示?*/
????html,?body,?ul?{?height:?100%?}
????/*?在父元素上寫入九宮格?*/
????ul?{
??????display:?grid;
??????grid:?var(--九宮格);
??????gap:?5px
????}
????/*?給子元素上色?*/
????li?{
??????background:?var(--極光綠)
????}
??style>
head>
<body>
??<ul>
????<li>li>
????<li>li>
????<li>li>
????<li>li>
????<li>li>
????<li>li>
????<li>li>
????<li>li>
????<li>li>
??ul>
body>
html>
運行結(jié)果：
也就是說，CSS變量可以這樣定義：
body?{
????--藍綠色:?aquamarine;
}
然后調(diào)用的時候：
h1?{
????color:?var(--藍綠色);
}
在vue中的變量
那么怎樣才能在vue3的