为什么 Vue3 选择了 CSS 变量

Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」。

看到这个，我脑子里有以下的疑问？

CSS 变量是什么？

Sass/Less 中不是有变量的定义么，为什么还需要使用 CSS 变量？

现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS，那 CSS 变量和这种方式有什么区别？

Vue 3 做了哪些操作，让 SFC (单文件组件)能更好的使用 CSS 变量？

以下对这些问题进行探讨。

CSS 变量并不是某个框架的产物，而是 CSS 作者定义的一个标准规范。

CSS 变量又称为 CSS 自定义属性，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如：--main-color: black;），由 var() 函数来获取值（比如：color: var(--main-color);）

为什么选择两根连词线（--）表示？因为变量 ? 被 Sass 用掉了，@ 被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

除了基础的使用，还有以下几点需要注意：

CSS 变量的命名是对大小写敏感的，也就是 --myColor 和 --mycolor 是不一样的。

var() 参数可以使用第二个参数设置默认值，当该变量无效的时候，就会使用这个默认值。

CSS 变量提供了 JavaScript 与 CSS 通信的一种途径，在 JS 中我们可以操作 CSS，跟操作普通的 CSS 属性是一样的。

Sass/Less 中不是有变量的定义么，为什么还需要使用 CSS 变量？SASS 变量是编译时，也就是说预处理器在向浏览器输出前已经解析完毕，而浏览器对 CSS 变量解析是运行时的，就是 CSS 变量可以跟 JavaScript 更好的通信，相当于 CSS 和 JavaScript 的桥梁。

另外预处理器和 CSS 变量并不冲突，它们结合可以更好的提升我们的开体验。

缺点是浏览器兼容性问题，CSS 变量目前的支持度并非特别好，IE 目前全部都是不支持的，但终上所述，依旧看好它的未来。

现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS，那 CSS 变量和这种方式有什么区别？

原因一：复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。当组件中的一个状态被几十个地方用到时，那么你可能需要绑定很多个 :style。一来代码会显得可读性不强，二来性能上应该是比原生的要差，毕竟要将更改经过 Vue 的指令绑定到每一个元素上。

通过 CSS 变量，就可以直接通过在组件的根元素设置变量，在组件内部 <style> 中直接使用即可

原因二：伪元素的使用，如果直接使用 :style 我们无法设置伪元素的样式，而 CSS 变量就可以。

Vue 3 做了哪些操作，让 SFC (单文件组件)能更好的使用 CSS 变量？

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


<script>
export default {
  data() {
    return {
      color: "red",
    };
  },
};
</script>


<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

在 Vue 3 中的 SFC 中，style 标签支持 vars 绑定，该参数接受对象键值对方式注入 CSS 变量，如上所示 <style vars="{ color }">。

这些变量会直接绑定到组件的根元素上，上面的例子中，最后的渲染结果如下：

<div style="--color:red" class="text">hello</div>