实现原理
首先css中是有变量的，可以像js变量一样在style中使用，然后Vue3支持将js中的变量传入style中，相当于在css中创建了同名的变量，值绑定到js变量上，后续会跟着js中的变量一同响应式变化。
CSS变量介绍
CSS变量的声明方式：
--color: red;
CSS变量的使用方式：
h1 {
color: var(--color);
}
作用域：
body {
--color: red;
}
h1 {
color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}
div {
--color: blue;
color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}
变量的作用域就是它所在的选择器的有效范围。
默认值：
div { width: var(–width, 100px) }
假如没有定义--width变量，那么就会取第二个参数的值，这就很适合我们用来封装组件。
在 vue3 的<style>中使用<script>里的变量的方式
创建一个 vite 项目（vue-cli创建的不可）:
npm init vite-app vars
项目初始化
编写代码：
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
border: '1px solid black',
color: 'red'
}
}
}
</script>
<style vars="{ border, color }" scoped>
h1 {
color: var(--color);
border: var(--border);
}
</style>
且在style中的变量也是响应式的。
原理：vue控制的是元素的style属性，使其动态变化。
使用全局变量的方式：
<style vars="{ color }" scoped>
h1 {
color: var(--global:color);
}
</style>
兼容性：不兼容IE
