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

前言

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

Vue2 用法

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

<template>
  <div :style="cssVars">
    <p class="text">测试文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "red"
    };
  },
  computed: {
    cssVars() {
      return {
        "--color": this.color
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.text {
  color: var(--color);
}
</style>

复制代码

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

Vue3 用法

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

<template>
  <div>
    <p class="text">测试文本</p>
  </div>
</template>

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

<style scoped vars="{ color }">
.text {
  color: var(--color);
}
</style>
复制代码

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

说明文档：sfc-style-variables

兼容 scss

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

<style scoped vars="{ color }">
h1 {
  font-size: var(--global:fontSize);
}
</style>
复制代码

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

<style lang="scss" scoped vars="{ color }">
.home {
  color: var(#{"--global:color"});
}
</style>
复制代码

总结

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

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

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

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