Vue超好玩的新特性:在CSS中引入JS变量

前端名狮

共 4121字,需浏览 9分钟

 ·

2021-02-08 20:30

幻想

以前做项目的时候经常会这么想:






复制代码

当然,想想也知道不可能,JS和CSS隶属不同上下文,CSS哪来的this呢?

那么怎么才能在CSS中使用JS变量呢?那就只能用JS操作DOM然后把变量塞进style里了,比如用ref获取到DOM元素,然后dom.style.color = this.color。

或者在模板里:




复制代码

不过这种方式还是有缺陷的,比如本来就不推荐把样式写在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变量的包容性很强,不像以往编程的时候都必须是英文命名,中文这次居然也可以完美运行,不信咱们来试一下:


lang="en">

charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
</span>Document<span style="color: navy;">

rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">


rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
















复制代码

运行结果:

也就是说,CSS变量可以这样定义:

body {
--蓝绿色: aquamarine;
}
复制代码

然后调用的时候:

h1 {
color: var(--蓝绿色);
}
复制代码

在vue中的变量

那么怎样才能在 vue3 的
复制代码

还记得文章一开始写的幻想中的组件是什么样吗:


复制代码

但是就算vue再牛它也不可能给CSS安个this啊,除非再做一个什么预处理器,不过这次利用CSS变量已经可以很接近咱们幻想中的组件啦:


复制代码

首先要在标签中写个vars="{}",再在大括号里写上你在data中声明过的值。

如果有多个变量的话,变量之间需要使用逗号进行分隔:






复制代码

再来试一下这个变量是不是响应式的,动态改变


复制代码

运行结果:

可以看到每300毫秒我们就改变一下 this.opacity 的值,它会映射到 CSS 变量上去,this.opacity 变了,--opacity 的值就会随之变化,视图也会随着数据的更新而相应的更新,这个特性简直太棒了!

脑洞大开

既然chinese-gradient和chinese-layout这两个CSS库验证了CSS中文变量的可行性,而且我记得对象的属性也是可以写中文的,那么咱们就来试一下在vue中能不能用这种黑魔法来写中文:






复制代码

运行结果:

居!然!成!功!了!

以后大家不会命名的话也别用汉语拼音了,直接写中文吧哈哈!后续维护的时候一看变量名就能一目了然(不过还是推荐用英文)。

原理

猜也能猜到,大概率是用到了类似于dom.style.setProperty('--opacity', this.opacity)之类的方法,按下f12打开控制台一看,果不其然,它控制的是组件元素的style属性:

不过我们刚才在
复制代码

运行结果:

可以看到Vue把CSS变量也编译了一个和data-v-后面的那串随机字符一样的:

那么问题来了,假如我要是在全局样式里定义了一个--color属性,我在带有scoped属性的组件里想用这个全局的 CSS 变量,可是一旦在scoped中使用CSS变量就会被编译成:--62a9ebed-color,可是全局定义的不是--62a9ebed-color而是--color,这样就会出现找不到全局属性的局面,这个问题要怎么解决呢?其实也很简单,只需要在--的后面加上一个global:就可以了:


复制代码

这样编译出来的CSS就会变成:var(--color)啦!

结语

怎么样是不是很好玩?Vue这次更新诚意满满,不过大家都把关注点放在了 Composition-API 上了,没有注意到这些不起眼的边边角角,但就是这些边边角角却可以极大的提高我们的开发体验。

对了,CSS变量也是有兼容性的:

从caniuse网站上可以看到,它是不兼容IE的,使用的时候记得确认一下自己项目需要兼容的范围。

更新

目前该文中的语法已被尤雨溪进行了修改,新语法请看《Vue 3.0.3 : 新增CSS变量传递以及最新的Ref提案》

作者:手撕红黑树 原文:https://juejin.cn/post/6856668819344392206
推荐阅读
  1. CSS变量对JS交互组件开发带来的提升与变革

  2. Vue scoped与深度选择器deep的原理

  3. Vue.js 组件复用和扩展之道

  4. 【深入vue】为什么Vue3.0不再使用defineProperty实现数据监听?

  5. 带你五步学会Vue SSR

  6. Vue3 新增API

  7. Vue Router history模式的配置方法及其原理

❤️爱心三连击

1.看到这里了就点个在看支持下吧,你的点赞在看是我创作的动力。

2.关注公众号前端名狮,回复「1」加入前端交流群,一起学习进步!

3.也可添加微信【qq1248351595】,一起成长。


“在看转发”是最大的支持


浏览 54
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报