很多情况我们需要主题搭配，亦或是统一便捷的管理，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>
<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 }">
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 中，建议都使用计算属性的写法。
