以前做项目的时候经常会这么想：要是我在data里面定义的变量也能在CSS里面用那该多好啊！
<template>
<h1>{{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style>
h1 {
color: this.color;
}
</style>
当然，想想也知道不可能，JS和CSS隶属不同上下文，CSS哪来的this呢？
什么是CSS变量
在JS里(不止JS，所有语言都差不多)，变量有如下几个特性：
- 声明
- 使用
- 作用域
为了方便理解，咱们通过用JS的方式来类比：
var color = 'red';
在CSS中等同于：
--color: red; // CSS的符号就是两个减号--
使用
CSS在使用变量的时候用到了一个函数叫var()：
CSS:
h1 {
color: var(--color);
}
作用域
body {
--color: red;
}
h1 {
color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}
div {
--color: blue;
color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}
也就是说，变量的作用域就是它所在的选择器的有效范围。
在vue中的变量
那么怎样才能在vue3的<style>中使用<script>里声明的变量呢？
首先我们先创建个支持vue3的vite项目：
npm init vite-app vars
然后进入到该文件夹安装依赖：
cd vars
npm i
然后创建一个组件，组件型式长这样：
<template>
<h1>{{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
首先要在<style>标签中写个vars="{}"，再在大括号里写上你在data中声明过的值。
多个变量之间使用逗号进行分隔：
<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>
而且这个变量是响应式的，动态改变<script>标签中的this.color值会引起视图的变化。
