為什么 Vue3 選擇了 CSS 變量
Vue 3 新增了一條實(shí)驗(yàn)性的功能——「單文件組件狀態(tài)驅(qū)動(dòng)的 CSS 變量」。
看到這個(gè)，我腦子里有以下的疑問(wèn)？
CSS 變量是什么？
Sass/Less 中不是有變量的定義么，為什么還需要使用 CSS 變量？
現(xiàn)有的 Vue 不是通過(guò) :style 的方式定義去動(dòng)態(tài)綁定 CSS，那 CSS 變量和這種方式有什么區(qū)別？
Vue 3 做了哪些操作，讓 SFC (單文件組件)能更好的使用 CSS 變量？
以下對(duì)這些問(wèn)題進(jìn)行探討。
CSS 變量并不是某個(gè)框架的產(chǎn)物，而是 CSS 作者定義的一個(gè)標(biāo)準(zhǔn)規(guī)范。
CSS 變量又稱為 CSS 自定義屬性，它包含的值可以在整個(gè)文檔中重復(fù)使用。由自定義屬性標(biāo)記設(shè)定值（比如：--main-color: black;），由 var() 函數(shù)來(lái)獲取值（比如：color: var(--main-color);）
為什么選擇兩根連詞線（--）表示？因?yàn)樽兞?? 被 Sass 用掉了，@ 被 Less 用掉了。為了不產(chǎn)生沖突，官方的 CSS 變量就改用兩根連詞線了。
除了基礎(chǔ)的使用，還有以下幾點(diǎn)需要注意：
CSS 變量的命名是對(duì)大小寫(xiě)敏感的，也就是 --myColor 和 --mycolor 是不一樣的。
var() 參數(shù)可以使用第二個(gè)參數(shù)設(shè)置默認(rèn)值，當(dāng)該變量無(wú)效的時(shí)候，就會(huì)使用這個(gè)默認(rèn)值。
CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑，在 JS 中我們可以操作 CSS，跟操作普通的 CSS 屬性是一樣的。
Sass/Less 中不是有變量的定義么，為什么還需要使用 CSS 變量？SASS 變量是編譯時(shí)，也就是說(shuō)預(yù)處理器在向?yàn)g覽器輸出前已經(jīng)解析完畢，而瀏覽器對(duì) CSS 變量解析是運(yùn)行時(shí)的，就是 CSS 變量可以跟 JavaScript 更好的通信，相當(dāng)于 CSS 和 JavaScript 的橋梁。
另外預(yù)處理器和 CSS 變量并不沖突，它們結(jié)合可以更好的提升我們的開(kāi)體驗(yàn)。
缺點(diǎn)是瀏覽器兼容性問(wèn)題，CSS 變量目前的支持度并非特別好，IE 目前全部都是不支持的，但終上所述，依舊看好它的未來(lái)。
現(xiàn)有的 Vue 不是通過(guò) :style 的方式定義去動(dòng)態(tài)綁定 CSS，那 CSS 變量和這種方式有什么區(qū)別？
原因一：復(fù)雜的網(wǎng)站都會(huì)有大量的 CSS 代碼，通常也會(huì)有許多重復(fù)的值。當(dāng)組件中的一個(gè)狀態(tài)被幾十個(gè)地方用到時(shí)，那么你可能需要綁定很多個(gè) :style。一來(lái)代碼會(huì)顯得可讀性不強(qiáng)，二來(lái)性能上應(yīng)該是比原生的要差，畢竟要將更改經(jīng)過(guò) Vue 的指令綁定到每一個(gè)元素上。
通過(guò) CSS 變量，就可以直接通過(guò)在組件的根元素設(shè)置變量，在組件內(nèi)部 <style> 中直接使用即可
原因二：偽元素的使用，如果直接使用 :style 我們無(wú)法設(shè)置偽元素的樣式，而 CSS 變量就可以。
Vue 3 做了哪些操作，讓 SFC (單文件組件)能更好的使用 CSS 變量？
<template><div class="text">hello</div></template><script>export default {data() {return {color: "red",};},};</script><style vars="{ color }">.text {color: var(--color);}</style>
在 Vue 3 中的 SFC 中，style 標(biāo)簽支持 vars 綁定，該參數(shù)接受對(duì)象鍵值對(duì)方式注入 CSS 變量，如上所示 <style vars="{ color }">。
這些變量會(huì)直接綁定到組件的根元素上，上面的例子中，最后的渲染結(jié)果如下：
<div style="--color:red" class="text">hello</div>