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