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