美文网首页
为什么 Vue3 选择了 CSS 变量

为什么 Vue3 选择了 CSS 变量

作者: 觞O | 来源:发表于2021-01-16 22:56 被阅读0次

Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」

看到这个,我脑子里有以下的疑问?

CSS 变量是什么?

Sass/Less 中不是有变量的定义么,为什么还需要使用 CSS 变量?

现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS,那 CSS 变量和这种方式有什么区别?

Vue 3 做了哪些操作,让 SFC (单文件组件)能更好的使用 CSS 变量

以下对这些问题进行探讨

CSS 变量基础

CSS 变量并不是某个框架的产物,而是 CSS 作者定义的一个标准规范

CSS 变量又称为 CSS 自定义属性,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如:--main-color: black;),由 var() 函数来获取值(比如: color: var(--main-color);)

为什么选择两根连词线(--)表示? 因为变量 ? 被 Sass 用掉了,@ 被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了

CSS 变量一个简单例子如下,CSS 变量基础演示地址

结果展示

我们现在 .parent 中定义变量 --parent-color: blue;,在 .child 中使用 color: var(--parent-color);

需要注意的是,变量的作用域就是它所在的选择器的有效范围,比如 .child 中定义的 --child-color: green;, 在 .parent 读取不到的,只针对 .child 元素下的元素有效

如果希望能够在 HTML 文档中都能访问到,则可以定义在类 :root 中

除了基础的使用,还有以下几点需要注意

CSS 变量的命名是对大小写敏感的,也就是 --myColor 和 --mycolor 是不一样的

var() 参数可以使用第二个参数设置默认值,当该变量无效的时候,就会使用这个默认值

CSS 变量提供了 JavaScript 与 CSS 通信的一种途径,在 JS 中我们可以操作 CSS,跟操作普通的 CSS 属性是一样的

这里就演示了最简单的使用,具体可以查看 MDN 文档

在 Vue 2 中使用CSS 变量

上面说了,CSS 变量并不是什么某个框架的产物,而是原生 CSS 的标准规范。那么在 Vue 2 中直接使用 CSS 变量肯定可以的,并没什么约束。

关键是我们怎么让 Vue 组件中的状态同步到 CSS 变量中,其实也很简单,通过 Style 绑定 即可。Vue 2 演示地址

结果:

我们只需要在组件的根元素中设置 :style="styleVar"(如果要该组件都可以使用,则必须放置在根元素下),就可以在 Vue 2.x 中实现组件中的状态和 CSS 值的绑定,而且这种绑定关系是响应式的,比如我定义一个方法,改变 font-size 的值,是可以实时更新的

效果演示:

:style VS CSS 变量

这里有个问题,现有的 Vue 可以通过 :style 的方式定义去动态绑定 CSS,比如我可以直接在上面的 .child-1中做如下绑定,效果跟上面是一致的。

那我为什么还要使用 CSS 变量?这样大费周章是否真有意义?

我总结有如下两个原因:

原因一: 复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。当组件中的一个状态被几十个地方用到时,那么你可能需要绑定很多个 :style。一来代码会显得可读性不强,二来性能上应该是比原生的要差,毕竟要将更改经过 Vue 的指令绑定到每一个元素上(这一点暂未验证)

通过 CSS 变量,就可以直接通过在组件的根元素设置变量,在组件内部 <style> 中直接使用即可

原因二:伪元素的使用 如果直接使用 :style 我们无法设置伪元素的样式,而 CSS 变量就可以

在 Vue 3 中使用 CSS 变量

虽然 Vue 2.x 中可以使用 CSS 变量,但需要通过样式绑定的方式传入,似乎没那么优雅,所以 Vue 3 中做了一些优化

新增 vars 绑定

在 Vue 3 中的 SFC 中,style 标签支持 vars 绑定,该参数接受对象键值对方式注入 CSS 变量,如上所示 <style vars="{ color }">。可以效果可以看 Vue 3演示地址

这些变量会直接绑定到组件的根元素上,上面的例子中,最后的渲染结果如下:

和 <style scoped> 一起使用

当 vars 和 <style scoped> 一起使用时,所应用的 CSS 变量将以组件的 Scoped id 作为前缀,访问的时候也会自动加上 Scoped id

比如,我们书写如下:

则编译过后,变成

假如我们这种情况下想访问的是全局的 CSS 变量呢?也就是我们不希望加上 Scoped Id,那么要书写类似如下:

这样会编译成如下结果:

Less/Sass 中的变量 VS CSS 变量

我理解最重要的一点,就是 CSS 变量可以跟 JavaScript 更好的通信,相当于 CSS 和 JavaScript 的桥梁。在 Vue 中这一点还是体现得挺明显的

另外来看一个切换主题的例子,如果我们用 Sass 变量,如下:

我们有两个主题,一个是普通的主题,一个暗黑模式的(dark)。注意,在暗黑模式中,我们需要新的颜色变量去更新旧的颜色变量。假如这种设置非常多的时候,我们会很苦恼。

看 CSS 变量设置的话

这种情况下,我们不需要额外定义一个颜色变量,因为我们只需要设置CSS 变量为正确的值即可

之所以会有以上用法上的不同,我理解是 SASS 变量是编译时,也就是说预处理器在向浏览器输出前已经解析完毕,而浏览器对 CSS 变量解析是运行时的

另外预处理器和 CSS 变量并不冲突,它们结合可以更好的提升我们的开体验

缺点——浏览器兼容性问题

CSS 变量目前的支持度并非特别好,IE 目前全部都是不支持的,但终上所述,依旧看好它的未来

对它的兼容性进行处理,我们也可以进行如下书写:

总结

最后总结一下文章开头提出的几个问题:

CSS 变量是什么? CSS 变量又称为 CSS 自定义属性,它包含的值可以在整个文档中重复使用

现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS,那 CSS 变量和它又有什么区别呢? 复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值 伪元素的使用

Vue 3 做了哪些操作,让 SFC (单文件组件)能更好的使用 CSS 变量 新增 vars 绑定 和 <style scoped> 一起使用,增强作用域功能

Sass/Less 中不是有变量的定义了么,为什么还要使用 CSS 变量? CSS 变量可以跟 JavaScript 更好的通信,相当于 CSS 和 JavaScript 的桥梁 SASS 变量是编译时,CSS 变量是运行时

结尾 需要这些资料,可以 关注公众号  清风酔  领取

相关文章

  • 为什么 Vue3 选择了 CSS 变量

    为什么 Vue3 选择了 CSS 变量 Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量...

  • 为什么 Vue3 选择了 CSS 变量

    Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」 看到这个,我脑子里有以下的疑问? C...

  • css变量使用var

    CSS变量(CSS Variables/Custom Properties) (1)变量属性的定义在一个类选择器下...

  • CSS3选择器

    基础 属性选择器(CSS2) [attr=val] attr代表属性值,val代表变量值 属性选择器的扩展(CSS...

  • sass入门

    变量 变量定义 $变量名: 变量值; 变量使用 $变量名$变量名不能使用在CSS选择器和属性名中 嵌套规则 普通嵌...

  • CSS | CSS Variable | CSS变量

    CSS | CSS Variable | CSS变量 原生的 CSS 已经支持变量W3C css-variable...

  • CSS第一天

    CSS 什么是CSS 为什么要学习CSS CSS基础语法 CSS使用方法 CSS选择器 CSS继承和层叠 CSS优...

  • Vue3中CSS使用JS变量

    符号 $ 符号 被 Sass 占用 @ 符号 被 less 占用 因此CSS中采用了 -- 格式 JS: 可以看到...

  • vue3 setup和ref

    vue3跟vue2的使用语法,完全不相同了,vue3所有方法变量多写在了setup里面了。 然后我开始改写

  • CSS基础扫盲——CSS选择器(前端学习&&拾遗)

    CSS基础扫盲-CSS选择器 为什么会有CSS选择器 一个HTML文件由很多HTML标签构成,我们有很多CSS规则...

网友评论

      本文标题:为什么 Vue3 选择了 CSS 变量

      本文链接:https://www.haomeiwen.com/subject/uuvoaktx.html