作者: 手撕紅黑樹
前言
以前在翻譯《Vue 3:2020年中狀态更新》的時候,文中曾經提到過尤雨溪希望7月中旬釋出RC版(候選版本),8月初釋出3.0正式版。
不過現在已經八月初了怎麼還是沒釋出呢?這個月初到底幾号才算是"初"呢?于是我趕緊去github上看看現在到底有沒有什麼風吹草動,看着看着突然發現一個非常好玩的特性,這個特性我以前就經常這麼想:要是我在data裡面定義的變量也能在CSS裡面用那該多好啊!(大家有沒有也這麼想過)
幻想
以前做項目的時候經常會這麼想:
<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 }">Vue</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
不過這種方式還是有缺陷的,比如本來就不推薦把樣式寫在style屬性裡,還有就是變量複用會很麻煩,比如一組DOM元素都想用這個變量,那就不得不給這一組起個類名,然後再在mounted裡面document.getElementsByClassName(),擷取到DOM集合之後還要循環周遊每個元素,為其加上dom.style.color = this.color,浪費了很多的性能。
其實CSS本身有很多缺陷,并不圖靈完備,是以才導緻了各種預處理器的出現:Sass、Less、Stylus等……
它們為CSS提供了很多特性:循環、條件語句、變量、函數等……
其中有個特性非常有用,那就是變量!于是CSS也引入了變量的這個概念,自從有了CSS變量,很多事情真的友善了許多,通過JS操作CSS變量,然後再在需要的地方使用CSS變量,這種方法比之前的高效得多。
什麼是CSS變量
在JS裡(不止JS,所有語言都差不多),變量有如下幾個特性:
- 聲明
- 使用
- 作用域
聲明
為了友善了解,咱們通過用JS的方式來類比:
var color = 'red';
在CSS中等同于:
--color: red;
當然這點跟JS不太一樣,但是如果你學PHP這類語言或者Sass的話應該就很好了解了,在PHP或Sass中,聲明變量的時候沒有一個關鍵字,而是在變量名的第一位加上一個美元符号$,這就代表聲明變量了。
PHP:
$color = 'red';
Sass:
$color: color;
但是$符号被Sass占用了,@符号被less占了,是以CSS隻能想出别的符号了,CSS的符号就是兩個減号--
使用
光聲明一個變量是沒有什麼太大意義的,隻有使用了它,這個變量才算有價值:
JS:
console.log(color)
可以看到var隻是個聲明變量的關鍵字,color才是變量名。
PHP:
echo $color;
Scss:
h1 {
color: $color;
}
但是在PHP或Sass中,聲明變量的時候帶着,用的時候也得帶着。
這就令許多開發者感到困惑,是以CSS在使用變量的時候用到了一個函數叫var():
CSS:
h1 {
color: var(--color);
}
雖然和PHP、Sass一樣,調用時要帶着字首(因為那就是變量名的一部分),但是不一樣的是需要用一個**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變量
有一次我看到了兩個腦洞大開的庫,才發現CSS變量還可以這麼玩:
- chinese-gradient
- chinese-layout
從他倆的名字就可以看出,都是用chinese開頭的,那麼大機率就是用中文做的CSS變量,點進去一看果不其然。
也就是說CSS變量的包容性很強,不像以往程式設計的時候都必須是英文命名,中文這次居然也可以完美運作,不信咱們來試一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在這裡用link标簽引入中文布局 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<!-- 在這裡用link标簽引入中文漸變色 -->
<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>
運作結果:
也就是說,CSS變量可以這樣定義:
body {
--藍綠色: aquamarine;
}
然後調用的時候:
h1 {
color: var(--藍綠色);
}
在vue中的變量
那麼怎樣才能在vue3的**<style>中使用<script>**裡聲明的變量呢?
首先我們先建立個支援vue3的vite項目:
npm init vite-app vars
然後進入到該檔案夾安裝依賴:
cd vars
npm i
然後建立一個元件,元件型式長這樣:
<template>
<h1>{{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
還記得文章一開始寫的幻想中的元件是什麼樣嗎:
<style>
h1 {
color: this.color;
}
</style>
但是就算vue再牛它也不可能給CSS安個this啊,除非再做一個什麼預處理器,不過這次利用CSS變量已經可以很接近咱們幻想中的元件啦:
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
首先要在**<style>标簽中寫個vars="{}"**,再在大括号裡寫上你在data中聲明過的值。
再來試一下這個變量是不是響應式的,動态改變**<script>标簽中的this.color**值會不會引起視圖的變化呢?來試一下:
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
opacity: 0
}
},
mounted () {
setInterval(_ => {
this.opacity >= 1 && (this.opacity = 0)
this.opacity += 0.2
}, 300)
}
}
</script>
<style vars="{ opacity }">
h1 {
color: rgb(65, 184, 131);
opacity: var(--opacity);
}
</style>
運作結果:
可以看到每300毫秒我們就改變一下this.opacity的值,它會映射到CSS變量上去,this.opacity變了,--opacity的值就會随之變化,視圖也會随着資料的更新而相應的更新,這個特性簡直太棒了!
多個變量之間使用逗号進行分隔:
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
border: '1px solid black',
color: 'red'
}
}
}
</script>
<style vars="{ border, color }" scoped>
h1 {
color: var(--color);
border: var(--border);
}
</style>
腦洞大開
既然chinese-gradient和chinese-layout這兩個CSS庫驗證了CSS中文變量的可行性,而且我記得對象的屬性也是可以寫中文的,那麼咱們就來試一下在vue中能不能用這種黑魔法來寫中文:
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
'透明度': 0
}
},
mounted () {
setInterval(_ => {
this['透明度'] >= 1 && (this['透明度'] = 0)
this['透明度'] += 0.2
}, 300)
}
}
</script>
<style vars="{ 透明度 }">
h1 {
color: rgb(65, 184, 131);
opacity: var(--透明度);
}
</style>
運作結果:
居!然!管!用!了!
以後大家不會命名的話也别用漢語拼音了,直接寫中文吧哈哈!後續維護的時候一看變量名就能一目了然(不過還是推薦用英文)。
原理
猜也能猜到,大機率是用到了類似于**dom.style.setProperty('--opacity', this.opacity)**之類的方法,按下f12打開控制台一看,果不其然,它控制的是元件元素的style屬性:
不過我們剛才在<style>标簽中隻用到了var,scoped其實也很常用,那麼如果他們兩個碰到一起去會編譯成什麼樣呢?
<style vars="{ 透明度 }" scoped>
h1 {
color: var(--透明度);
}
</style>
運作結果:
可以看到Vue把CSS變量也編譯了一個和**data-v-**後面的那串随機字元一樣的:
那麼問題來了,假如我要是在全局樣式裡定義了一個**--color屬性,我在帶有scoped屬性的元件裡想用這個全局的CSS變量,可是一旦在scoped中使用CSS變量就會被編譯成:--62a9ebed-color**,可是全局定義的不是**--62a9ebed-color而是--color**,這樣就會出現找不到全局屬性的局面,這個問題要怎麼解決呢?其實也很簡單,隻需要在**--的後面加上一個global:**就可以了:
<style vars="{ color }" scoped>
h1 {
color: var(--global:color);
}
</style>
這樣編譯出來的CSS就會變成:**var(--color)**啦!
結語
怎麼樣是不是很好玩?Vue這次更新誠意滿滿,不過大家都把關注點放在了Composition-API上了,沒有注意到這些不起眼的邊邊角角,但就是這些邊邊角角卻可以極大的提高我們的開發體驗。
對了,CSS變量也是有相容性的: