Vue3在css中使用js变量及其原理解读

实现原理

首先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