Vue2/Vue3中在css中使用js的变量（scss也适用）

前言

很多情况我们需要主题搭配，亦或是统一便捷的管理，css 变量是必不可少的。在 Vue 中将 data 中的变量反映到 css 变量上也是大势所趋。 关于css变量的介绍可以查看 MDN ，关于兼容性问题可以查看 Can I use

Vue2 用法

在以前的 Vue2 中，我们通常使用计算属性反映 data 中的 变量到 css 中：

复制代码

从而在 data 中的数据改变时，计算属性也会被同步改变并反映到挂载的节点 style 中。

Vue3 用法

在 Vue3 中，提供了一种新的快捷使用方法：

 复制代码

这里通过 标签上的 vars 进行解构 data ，从而在样式区域就可以使用 css 变量了！

说明文档：sfc-style-variables

兼容 scss

官方文档中介绍以 var(--global:xxx) 在这种方法可以使用全局的 css 变量（若使用 scoped 会自动给 css 变量附带 hash 值），但只介绍了 css 的写法：

 复制代码

这么写在 scss 是会编译报错的。摸索一番，如果要使用 scss ，请使用如下写法：

 复制代码

总结

无论在 Vue2 还是 3 中，css 变量都是即时反映的，无需担心不会更新的问题。

虽然 Vue3 中的 css 变量比较简单，但目前处于 实验性 ：

如果追求稳定，无论在 Vue3 还是 2 中，建议都使用计算属性的写法。

作者：IL风子
链接：https://juejin.cn/post/7005744294799605773
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。