為什么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 變量基礎(chǔ)
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 變量就改用兩根連詞線了
CSS 變量一個(gè)簡(jiǎn)單例子如下，CSS 變量基礎(chǔ)演示地址
- <div class="parent">
- I am Parent
- <div class="child">
- I am Child
- </div>
- </div>
- .parent {
- /* 變量的作用域就是它所在的選擇器的有效范圍，所以.parent 讀取不到 child 中的變量 */
- color: var(--body-child);
- /* 定義變量 */
- --parent-color: blue;
- }
- .child {
- /* 通過(guò) var 讀取變量 */
- color: var(--parent-color);
- --child-color: green;
- }
結(jié)果展示
我們現(xiàn)在 .parent 中定義變量 --parent-color: blue;，在 .child 中使用 color: var(--parent-color);
需要注意的是，變量的作用域就是它所在的選擇器的有效范圍，比如 .child 中定義的 --child-color: green;， 在 .parent 讀取不到的，只針對(duì) .child 元素下的元素有效
如果希望能夠在 HTML 文檔中都能訪問(wèn)到，則可以定義在類 :root 中
除了基礎(chǔ)的使用，還有以下幾點(diǎn)需要注意
- CSS 變量的命名是對(duì)大小寫敏感的，也就是 --myColor 和 --mycolor 是不一樣的
- var() 參數(shù)可以使用第二個(gè)參數(shù)設(shè)置默認(rèn)值，當(dāng)該變量無(wú)效的時(shí)候，就會(huì)使用這個(gè)默認(rèn)值
- CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑，在 JS 中我們可以操作 CSS，跟操作普通的 CSS 屬性是一樣的
- // 獲取一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
- element.style.getPropertyValue("--my-var");
- // 獲取任意 Dom 節(jié)點(diǎn)上的 CSS 變量
- getComputedStyle(element).getPropertyValue("--my-var");
- // 修改一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
- element.style.setProperty("--my-var", jsVar + 4);
這里就演示了最簡(jiǎn)單的使用，具體可以查看 MDN 文檔
在 Vue 2 中使用CSS 變量
上面說(shuō)了，CSS 變量并不是什么某個(gè)框架的產(chǎn)物，而是原生 CSS 的標(biāo)準(zhǔn)規(guī)范。那么在 Vue 2 中直接使用 CSS 變量肯定可以的，并沒(méi)什么約束。
關(guān)鍵是我們?cè)趺醋?Vue 組件中的狀態(tài)同步到 CSS 變量中，其實(shí)也很簡(jiǎn)單，通過(guò) Style 綁定 即可。Vue 2 演示地址
- <template>
- <!-- 如果要該組件都可以使用，則必須放置在根元素下 -->
- <div class="hello" :style="styleVar">
- <div class="child-1">I am Child 1</div>
- <div class="child-2">I am Child 2</div>
- <div @click="onClick">Change Red TO Blue</div>
- </div>
- </template>
- <script>
- export default {
- name: "HelloWorld",
- props: {
- msg: String,
- },
- data() {
- return {
- styleVar: {
- "--colorBlue": "blue",
- "--colorRed": "red",
- "--fontSize": "30px",
- "--fontSizeTest": "30px",
- },
- };
- },
- methods: {
- onClick() {
- this.styleVar["--fontSizeTest"] = "40px";
- },
- },
- };
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- .child-1 {
- color: var(--colorBlue);
- font-size: var(--fontSize);
- }
- .child-2 {
- color: var(--colorRed);
- font-size: var(--fontSizeTest);
- }
- </style>
結(jié)果：
我們只需要在組件的根元素中設(shè)置 :style="styleVar"（如果要該組件都可以使用，則必須放置在根元素下），就可以在 Vue 2.x 中實(shí)現(xiàn)組件中的狀態(tài)和 CSS 值的綁定，而且這種綁定關(guān)系是響應(yīng)式的，比如我定義一個(gè)方法，改變 font-size 的值，是可以實(shí)時(shí)更新的
- onClick() {
- this.styleVar["--fontSizeTest"] = "40px";
- },
效果演示：
:style VS CSS 變量
這里有個(gè)問(wèn)題，現(xiàn)有的 Vue 可以通過(guò) :style 的方式定義去動(dòng)態(tài)綁定 CSS，比如我可以直接在上面的 .child-1中做如下綁定，效果跟上面是一致的。
- <div class="child-1" :style="{ color: 'blue', fontSize: '30px' }">
- I am Child 1
- </div>
那我為什么還要使用 CSS 變量？這樣大費(fèi)周章是否真有意義？
我總結(jié)有如下兩個(gè)原因：
原因一：
復(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è)元素上（這一點(diǎn)暫未驗(yàn)證）
通過(guò) CSS 變量，就可以直接通過(guò)在組件的根元素設(shè)置變量，在組件內(nèi)部 <style> 中直接使用即可
原因二：偽元素的使用
如果直接使用 :style 我們無(wú)法設(shè)置偽元素的樣式，而 CSS 變量就可以
- p::first-line {
- color: var(--theme-secondary-color);
- }
在 Vue 3 中使用 CSS 變量
雖然 Vue 2.x 中可以使用 CSS 變量，但需要通過(guò)樣式綁定的方式傳入，似乎沒(méi)那么優(yōu)雅，所以 Vue 3 中做了一些優(yōu)化
新增 vars 綁定
- <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 }">。可以效果可以看 Vue 3演示地址
這些變量會(huì)直接綁定到組件的根元素上，上面的例子中，最后的渲染結(jié)果如下：
- <div style="--color:red" class="text">hello</div>
和 <style scoped> 一起使用
當(dāng) vars 和 <style scoped> 一起使用時(shí)，所應(yīng)用的 CSS 變量將以組件的 Scoped id 作為前綴，訪問(wèn)的時(shí)候也會(huì)自動(dòng)加上 Scoped id
比如，我們書寫如下：
- <style scoped vars="{ color }">
- h1 {
- color: var(--color);
- }
- </style>
則編譯過(guò)后，變成
- h1 {
- color: var(--6b53742-color);
- }
假如我們這種情況下想訪問(wèn)的是全局的 CSS 變量呢？也就是我們不希望加上 Scoped Id，那么要書寫類似如下：
- <style scoped vars="{ color }">
- h1 {
- color: var(--color);
- font-size: var(--global:fontSize);
- }
- </style>
這樣會(huì)編譯成如下結(jié)果：
- h1 {
- color: var(--6b53742-color);
- font-size: var(--fontSize);
- }
Less/Sass 中的變量 VS CSS 變量
我理解最重要的一點(diǎn)，就是 CSS 變量可以跟 JavaScript 更好的通信，相當(dāng)于 CSS 和 JavaScript 的橋梁。在 Vue 中這一點(diǎn)還是體現(xiàn)得挺明顯的
另外來(lái)看一個(gè)切換主題的例子，如果我們用 Sass 變量，如下：
- $color-primary: blue;
- $color-text: black;
- $color-bg: white;
- /* invert */
- $color-primary-invert: red;
- $color-text-invert: white;
- $color-bg-invert: black;
- .component {
- color: $color-text;
- background-color: $color-bg;
- a {
- color: $color-primary;
- }
- }
- .component--dark {
- color: $color-text-invert;
- background-color: $color-bg-invert;
- a {
- color: $color-primary-invert;
- }
- }
我們有兩個(gè)主題，一個(gè)是普通的主題，一個(gè)暗黑模式的（dark）。注意，在暗黑模式中，我們需要新的顏色變量去更新舊的顏色變量。假如這種設(shè)置非常多的時(shí)候，我們會(huì)很苦惱。
看 CSS 變量設(shè)置的話
- :root, [data-theme="default"] {
- --color-primary: blue;
- /* color contrasts */
- --color-bg: white;
- --color-contrast-lower: hsl(0, 0%, 95%);
- --color-contrast-low: hsl(240, 1%, 83%);
- --color-contrast-medium: hsl(240, 1%, 48%);
- --color-contrast-high: hsl(240, 4%, 20%);
- --color-contrast-higher: black;
- }
- [data-theme] {
- background-color: var(--color-bg);
- color: var(--color-contrast-high);
- }
- [data-theme="dark"] {
- --color-primary: red;
- /* color contrasts */
- --color-bg: black;
- --color-contrast-lower: hsl(240, 6%, 15%);
- --color-contrast-low: hsl(252, 4%, 25%);
- --color-contrast-medium: hsl(240, 1%, 57%);
- --color-contrast-high: hsl(0, 0%, 89%);
- --color-contrast-higher: white;
- }
這種情況下，我們不需要額外定義一個(gè)顏色變量，因?yàn)槲覀冎恍枰O(shè)置CSS 變量為正確的值即可
之所以會(huì)有以上用法上的不同，我理解是 SASS 變量是編譯時(shí)，也就是說(shuō)預(yù)處理器在向?yàn)g覽器輸出前已經(jīng)解析完畢，而瀏覽器對(duì) CSS 變量解析是運(yùn)行時(shí)的
另外預(yù)處理器和 CSS 變量并不沖突，它們結(jié)合可以更好的提升我們的開(kāi)體驗(yàn)
缺點(diǎn)——瀏覽器兼容性問(wèn)題
CSS 變量目前的支持度并非特別好，IE 目前全部都是不支持的，但終上所述，依舊看好它的未來(lái)
對(duì)它的兼容性進(jìn)行處理，我們也可以進(jìn)行如下書寫：
- a {
- color: #7F583F;
- color: var(--primary);
- }
總結(jié)
最后總結(jié)一下文章開(kāi)頭提出的幾個(gè)問(wèn)題：
- CSS 變量是什么？
- CSS 變量又稱為 CSS 自定義屬性，它包含的值可以在整個(gè)文檔中重復(fù)使用
- 現(xiàn)有的 Vue 不是通過(guò) :style 的方式定義去動(dòng)態(tài)綁定 CSS，那 CSS 變量和它又有什么區(qū)別呢？
- 復(fù)雜的網(wǎng)站都會(huì)有大量的 CSS 代碼，通常也會(huì)有許多重復(fù)的值
- 偽元素的使用
- Vue 3 做了哪些操作，讓 SFC (單文件組件)能更好的使用 CSS 變量
- 新增 vars 綁定
- 和 <style scoped> 一起使用，增強(qiáng)作用域功能
- Sass/Less 中不是有變量的定義了么，為什么還要使用 CSS 變量？
- CSS 變量可以跟 JavaScript 更好的通信，相當(dāng)于 CSS 和 JavaScript 的橋梁
- SASS 變量是編譯時(shí)，CSS 變量是運(yùn)行時(shí)
