Vue3 “爱”上了 CSS 变量，结果会如何

Vue3 为什么会“爱上”CSS 变量

Vue 3 新增了一条实验性的功能

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

• CSS 变量是什么？
• Sass/Less 中不是有变量的定义么，为什么还需要使用 CSS 变量？
• 现有的 Vue 不是通过 ：style 的方式定义去动态绑定 CSS，那 CSS 变量和这种方式有什么区别？
• Vue 3 做了哪些操作，让 SFC （单文件组件）能更好的使用 CSS 变量

以下对这些问题进行探讨

CSS 变量基础

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

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

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

CSS 变量一个简单例子如下：

结果展示

我们现在 .parent 中定义变量 --parent-color： blue；，在 .child 中使用 color： var（--parent-color）；

需要注意的是，变量的作用域就是它所在的选择器的有效范围，比如 .child 中定义的 --child-color： green；， 在 .parent 读取不到的，只针对 .child 元素下的元素有效

如果希望能够在 HTML 文档中都能访问到，则可以定义在类 ：root 中

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

• CSS 变量的命名是对大小写敏感的，也就是 --myColor 和 --mycolor 是不一样的
• var（） 参数可以使用第二个参数设置默认值，当该变量无效的时候，就会使用这个默认值
• CSS 变量提供了 JavaScript 与 CSS 通信的一种途径，在 JS 中我们可以操作 CSS，跟操作普通的 CSS 属性是一样的

在 Vue 2 中使用CSS 变量

上面说了，CSS 变量并不是什么某个框架的产物，而是原生 CSS 的标准规范。那么在 Vue 2 中直接使用 CSS 变量肯定可以的，并没什么约束。

关键是我们怎么让 Vue 组件中的状态同步到 CSS 变量中，其实也很简单，通过 Style 绑定 即可。

结果：

我们只需要在组件的根元素中设置 ：style=“styleVar”（如果要该组件都可以使用，则必须放置在根元素下），就可以在 Vue 2.x 中实现组件中的状态和 CSS 值的绑定，而且这种绑定关系是响应式的，比如我定义一个方法，改变 font-size 的值，是可以实时更新的

效果演示：

：style VS CSS 变量

这里有个问题，现有的 Vue 可以通过 ：style 的定义方式去动态绑定 CSS，比如我可以直接在上面的 .child-1中做如下绑定，效果跟上面是一致的。

那我为什么还要使用 CSS 变量？这样大费周章是否真有意义？

我总结有如下两个原因：

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