Vue超好玩的新特性：在CSS中使用JS變量

時間  2020-12-03
標籤 css html vue node git github web npm 編程 segmentfault 欄目 CSS 简体版
原文   原文鏈接

做者: 手撕紅黑樹
css

https://segmentfault.com/a/1190000023479851
html

前言

文末贈書福利vue

之前在翻譯《Vue 3：2020年中狀態更新》的時候，文中曾經提到過尤雨溪但願7月中旬發佈RC版(候選版本)，8月初發布3.0正式版。node

不過如今已經八月初了怎麼仍是沒發佈呢？這個月初到底幾號纔算是"初"呢？因而我趕忙去github上看看如今到底有沒有什麼風吹草動，看着看着忽然發現一個很是好玩的特性，這個特性我之前就常常這麼想：要是我在data裏面定義的變量也能在CSS裏面用那該多好啊！(你們有沒有也這麼想過)git

幻想

之前作項目的時候常常會這麼想：github

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

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

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

固然，想一想也知道不可能，JS和CSS隸屬不一樣上下文，CSS哪來的this呢？web

那麼怎麼才能在CSS中使用JS變量呢？那就只能用JS操做DOM而後把變量塞進style裏了，好比用ref獲取到DOM元素，而後dom.style.color = this.color。npm

或者在模板裏：編程

<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，浪費了不少的性能。segmentfault

其實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變量也是有兼容性的:

從[caniuse](<https://www.caniuse.com/#search=CSS Variables>)網站上能夠看到，它是不兼容IE的，使用的時候記得確認一下本身項目須要兼容的範圍。

包郵送書

   

本次送的 《Node.js企業級應用開發實戰》 主要是介紹 Node.js 技術棧，內容涉及 Node.js 的基礎知識、核心編程、網絡編程、數據存儲、綜合應用等五大部分。其中綜合應用部分，更是以一個真實的「新聞頭條」互聯網應用做爲案例，能夠令讀者從 0 開始掌握 Node.js

內容簡介

  • 基礎知識（第 1 ~ 3 章）：介紹 Node.js 的基礎知識，包括模塊化、測試等。
  • 核心編程（第 4 ~ 9 章）：介紹 Node.js 的緩衝區、事件、定時、文件、進程、流等方面的處理。
  • 網絡編程（第 10 ~ 17 章）：介紹 Node.js 的 TCP、UDP、HTTP、WebSocket、TLS/SSL、中間件、Angular、響應式編程等方面的內容。
  • 數據存儲（第 18 ~ 20 章）：介紹 Node.js 關於 MySQL、MongoDB、Redis 等數據存儲的操做。
  • 綜合應用（第 21 ~ 22 章）：介紹 Node.js 實現「用戶管理」互聯網應用的完整過程


參與方式

掃碼回覆暗號666參與

開獎時間: 周日(08/16)晚19：00

本文分享自微信公衆號 - Vue中文社區（vue_fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程