為什么 Vue3 選擇了 CSS 變量

Vue 3 新增了一條實驗性的功能——「單文件組件狀態(tài)驅(qū)動的 CSS 變量」。

看到這個，我腦子里有以下的疑問？

CSS 變量是什么？

Sass/Less 中不是有變量的定義么，為什么還需要使用 CSS 變量？

現(xiàn)有的 Vue 不是通過 :style 的方式定義去動態(tài)綁定 CSS，那 CSS 變量和這種方式有什么區(qū)別？

Vue 3 做了哪些操作，讓 SFC (單文件組件)能更好的使用 CSS 變量？

以下對這些問題進行探討。

CSS 變量并不是某個框架的產(chǎn)物，而是 CSS 作者定義的一個標(biāo)準(zhǔn)規(guī)范。

CSS 變量又稱為 CSS 自定義屬性，它包含的值可以在整個文檔中重復(fù)使用。由自定義屬性標(biāo)記設(shè)定值（比如：--main-color: black;），由 var() 函數(shù)來獲取值（比如：color: var(--main-color);）

為什么選擇兩根連詞線（--）表示？因為變量 ? 被 Sass 用掉了，@ 被 Less 用掉了。為了不產(chǎn)生沖突，官方的 CSS 變量就改用兩根連詞線了。

除了基礎(chǔ)的使用，還有以下幾點需要注意：

CSS 變量的命名是對大小寫敏感的，也就是 --myColor 和 --mycolor 是不一樣的。

var() 參數(shù)可以使用第二個參數(shù)設(shè)置默認(rèn)值，當(dāng)該變量無效的時候，就會使用這個默認(rèn)值。

CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑，在 JS 中我們可以操作 CSS，跟操作普通的 CSS 屬性是一樣的。

Sass/Less 中不是有變量的定義么，為什么還需要使用 CSS 變量？SASS 變量是編譯時，也就是說預(yù)處理器在向瀏覽器輸出前已經(jīng)解析完畢，而瀏覽器對 CSS 變量解析是運行時的，就是 CSS 變量可以跟 JavaScript 更好的通信，相當(dāng)于 CSS 和 JavaScript 的橋梁。

另外預(yù)處理器和 CSS 變量并不沖突，它們結(jié)合可以更好的提升我們的開體驗。

缺點是瀏覽器兼容性問題，CSS 變量目前的支持度并非特別好，IE 目前全部都是不支持的，但終上所述，依舊看好它的未來。

現(xiàn)有的 Vue 不是通過 :style 的方式定義去動態(tài)綁定 CSS，那 CSS 變量和這種方式有什么區(qū)別？

原因一：復(fù)雜的網(wǎng)站都會有大量的 CSS 代碼，通常也會有許多重復(fù)的值。當(dāng)組件中的一個狀態(tài)被幾十個地方用到時，那么你可能需要綁定很多個 :style。一來代碼會顯得可讀性不強，二來性能上應(yīng)該是比原生的要差，畢竟要將更改經(jīng)過 Vue 的指令綁定到每一個元素上。

通過 CSS 變量，就可以直接通過在組件的根元素設(shè)置變量，在組件內(nèi)部 <style> 中直接使用即可

原因二：偽元素的使用，如果直接使用 :style 我們無法設(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ù)接受對象鍵值對方式注入 CSS 變量，如上所示 <style vars="{ color }">。

這些變量會直接綁定到組件的根元素上，上面的例子中，最后的渲染結(jié)果如下：

<div style="--color:red" class="text">hello</div>