Vue2/Vue3 在 css 中使用 js 变量（less、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 中，提供了一种新的快捷使用方法：v-bind() 。至于对于less和scss的支持都很好。如果是使用less的话，只需在<style>标签里添加lang="less"（即<style lang="less">）即可，scss同理。
单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：

<template>
  <div class="text">hello</div>
</template>

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

<style>
.text {
  color: v-bind(color);
}
</style>

这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)：

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

并且最新版本的vue也支持模版语法了：

<script setup>
const theme = {
  borderSize: 5
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  border: v-bind(`${theme.borderSize}px`);
}
</style>

无论在 Vue2 还是 3 中，css 变量都是响应式的，无需担心不会更新的问题。