App下載

Vue新特性:在CSS 中可以使用 JS 變量

猿友 2020-08-27 11:23:09 瀏覽數(shù) (6562)
反饋

前言

小編之前在看《Vue 3:2020年中狀態(tài)更新》的時(shí)候,記得文中尤雨溪希望在7月中旬發(fā)布RC版(候選版本),然后8月初發(fā)布3.0正式版。

不過(guò)現(xiàn)在已經(jīng)八月初了怎么還是沒(méi)發(fā)布呢?這個(gè)月初到底幾號(hào)才算是"初"呢?于是我趕緊去github上看看現(xiàn)在到底有沒(méi)有什么風(fēng)吹草動(dòng),看著看著突然發(fā)現(xiàn)一個(gè)非常好玩的特性,這個(gè)特性我以前就經(jīng)常這么想:要是我在data里面定義的變量也能在 CSS 里面用那該多好??!(大家有沒(méi)有也這么想過(guò))

幻想

以前做項(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)然,想想也知道不可能,JSCSS隸屬不同上下文,CSS哪來(lái)的this呢?

那么怎么才能在CSS中使用JS變量呢?那就只能用JS操作DOM然后把變量塞進(jìn)style里了,比如用ref獲取到DOM元素,然后dom.style.color = this.color

或者在模板里:

<template>
  <h1 :style="{ color }">Vue</h1>
</template>


<script>
export default {
  data () {
    return {
        color: 'red'
    }
  }
}
</script>

不過(guò)這種方式還是有缺陷的,比如本來(lái)就不推薦把樣式寫(xiě)在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、LessStylus等……

它們?yōu)?code>CSS提供了很多特性:循環(huán)、條件語(yǔ)句、變量、函數(shù)等……

其中有個(gè)特性非常有用,那就是變量!于是CSS也引入了變量的這個(gè)概念,自從有了CSS變量,很多事情真的方便了許多,通過(guò)JS操作CSS變量,然后再在需要的地方使用CSS變量,這種方法比之前的高效得多。

什么是CSS變量

JS里(不止JS,所有語(yǔ)言都差不多),變量有如下幾個(gè)特性:

  • 聲明
  • 使用
  • 作用域

聲明

為了方便理解,咱們通過(guò)用JS的方式來(lái)類比:

var color = 'red';

在CSS中等同于:

--color: red;

當(dāng)然這點(diǎn)跟JS不太一樣,但是如果你學(xué)PHP這類語(yǔ)言或者Sass的話應(yīng)該就很好理解了,在PHPSass中,聲明變量的時(shí)候沒(méi)有一個(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è)變量是沒(méi)有什么太大意義的,只有使用了它,這個(gè)變量才算有價(jià)值:

JS:

console.log(color)

可以看到var只是個(gè)聲明變量的關(guān)鍵字,color才是變量名。

PHP:

echo $color;

Scss:

h1 {
    color: $color;
}

但是在PHPSass中,聲明變量的時(shí)候帶著,用的時(shí)候也得帶著。

這就令許多開(kāi)發(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 **/
}

也就是說(shuō),變量的作用域就是它所在的選擇器的有效范圍。

中文CSS變量

有一次我看到了兩個(gè)腦洞大開(kāi)的庫(kù),才發(fā)現(xiàn)CSS變量還可以這么玩:

  • chinese-gradient
  • chinese-layout

從他倆的名字就可以看出,都是用chinese開(kāi)頭的,那么大概率就是用中文做的CSS變量,點(diǎn)進(jìn)去一看果不其然。

也就是說(shuō)CSS變量的包容性很強(qiáng),不像以往編程的時(shí)候都必須是英文命名,中文這次居然也可以完美運(yùn)行,不信咱們來(lái)試一下:

<!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標(biāo)簽引入中文布局 -->
  <link rel="stylesheet" >


  <!-- 在這里用link標(biāo)簽引入中文漸變色 -->
  <link rel="stylesheet" >
  <style>
    /* 清除默認(rèn)樣式 */
    * { padding: 0; margin: 0 }
    ul { list-style: none }


    /* 全屏顯示 */
    html, body, ul { height: 100% }


    /* 在父元素上寫(xiě)入九宮格 */
    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é)果:

運(yùn)行結(jié)果

也就是說(shuō),CSS變量可以這樣定義:

body {
    --藍(lán)綠色: aquamarine;
}

然后調(diào)用的時(shí)候:

h1 {
    color: var(--藍(lán)綠色);
}

在vue中的變量

那么怎樣才能在 vue3<style> 中使用**<script>**里聲明的變量呢?

首先我們先創(chuàng)建個(gè)支持vue3vite項(xiàng)目:

npm init vite-app vars

然后進(jìn)入到該文件夾安裝依賴:

cd vars

npm i

然后創(chuàng)建一個(gè)組件,組件型式長(zhǎng)這樣:

<template>
  <h1>{{ color }}</h1>
</template>


<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>


<style vars="{ color }">
h1 {
  color: var(--color);
}
</style>

還記得文章一開(kāi)始寫(xiě)的幻想中的組件是什么樣嗎:

<style>
h1 {
  color: this.color;
}
</style>

但是就算vue再牛它也不可能給CSS安個(gè)this啊,除非再做一個(gè)什么預(yù)處理器,不過(guò)這次利用CSS變量已經(jīng)可以很接近咱們幻想中的組件啦:

<style vars="{ color }">
h1 {
  color: var(--color);
}
</style>

首先要在<style>標(biāo)簽中寫(xiě)個(gè)vars="{}",再在大括號(hào)里寫(xiě)上你在data中聲明過(guò)的值。

再來(lái)試一下這個(gè)變量是不是響應(yīng)式的,動(dòng)態(tài)改變<script>標(biāo)簽中的this.color值會(huì)不會(huì)引起視圖的變化呢?來(lái)試一下:

<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>

運(yùn)行結(jié)果:

運(yùn)行結(jié)果

可以看到每 300 毫秒我們就改變一下this.opacity的值,它會(huì)映射到CSS變量上去,this.opacity變了,--opacity的值就會(huì)隨之變化,視圖也會(huì)隨著數(shù)據(jù)的更新而相應(yīng)的更新,這個(gè)特性簡(jiǎn)直太棒了!

多個(gè)變量之間使用逗號(hào)進(jìn)行分隔:

<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>

腦洞大開(kāi)

既然chinese-gradientchinese-layout這兩個(gè)CSS庫(kù)驗(yàn)證了CSS中文變量的可行性,而且我記得對(duì)象的屬性也是可以寫(xiě)中文的,那么咱們就來(lái)試一下在vue中能不能用這種黑魔法來(lái)寫(xiě)中文:

<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>

運(yùn)行結(jié)果:

運(yùn)行結(jié)果

居!然!管!用!了!

以后大家不會(huì)命名的話也別用漢語(yǔ)拼音了,直接寫(xiě)中文吧哈哈!后續(xù)維護(hù)的時(shí)候一看變量名就能一目了然(不過(guò)還是推薦用英文)。

原理

猜也能猜到,大概率是用到了類似于dom.style.setProperty('--opacity', this.opacity)之類的方法,按下 f12 打開(kāi)控制臺(tái)一看,果不其然,它控制的是組件元素的style屬性:

原理

不過(guò)我們剛才在<style>標(biāo)簽中只用到了var,scoped其實(shí)也很常用,那么如果他們兩個(gè)碰到一起去會(huì)編譯成什么樣呢?

<style vars="{ 透明度 }" scoped>
h1 {
  color: var(--透明度);
}
</style>

運(yùn)行結(jié)果:

運(yùn)行結(jié)果

可以看到Vue把CSS變量也編譯了一個(gè)和data-v-后面的那串隨機(jī)字符一樣的:

運(yùn)行結(jié)果

那么問(wèn)題來(lái)了,假如我要是在全局樣式里定義了一個(gè)--color屬性,我在帶有scoped屬性的組件里想用這個(gè)全局的CSS變量,可是一旦在scoped中使用CSS變量就會(huì)被編譯成:--62a9ebed-color,可是全局定義的不是--62a9ebed-color而是--color,這樣就會(huì)出現(xiàn)找不到全局屬性的局面,這個(gè)問(wèn)題要怎么解決呢?其實(shí)也很簡(jiǎn)單,只需要在--的后面加上一個(gè)global:就可以了:

<style vars="{ color }" scoped>
h1 {
  color: var(--global:color);
}
</style>

這樣編譯出來(lái)的CSS就會(huì)變成:var(--color)啦!

結(jié)語(yǔ)

怎么樣是不是很好玩?Vue這次更新誠(chéng)意滿滿,不過(guò)大家都把關(guān)注點(diǎn)放在了Composition-API上了,沒(méi)有注意到這些不起眼的邊邊角角,但就是這些邊邊角角卻可以極大的提高我們的開(kāi)發(fā)體驗(yàn)。

對(duì)了,CSS變量也是有兼容性的:

CSS變量兼容性

從 caniuse (www.caniuse.com/#search=CSS Variables)網(wǎng)站上可以看到,它是不兼容IE的,使用的時(shí)候記得確認(rèn)一下自己項(xiàng)目需要兼容的范圍。

原文鏈接:segmentfault.com/a/1190000023479851

作者:手撕紅黑樹(shù)

以上就是W3Cschool編程獅關(guān)于Vue新特性:在CSS 中可以使用 JS 變量的相關(guān)介紹了,希望對(duì)大家有所幫助。

0 人點(diǎn)贊