为什么 Vue3.0 选择了 CSS 变量

2008 年 9 月 17 日

为什么 Vue3 选择了 CSS 变量

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

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

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
变量一个简单例子如下， CSS 变量基础演示地址
^[2]

<div class="parent">
  I am Parent
<div class="child">
    I am Child
div>
div>

.parent {
/*  变量的作用域就是它所在的选择器的有效范围，所以.parent 读取不到 child 中的变量  */
color: var(--body-child);
/*  定义变量  */
--parent-color: blue;
}
.child {
/*  通过 var 读取变量  */
color: var(--parent-color);
--child-color: green;
}

结果展示

我们现在 .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
属性是一样的

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

这里就演示了最简单的使用，具体可以查看 MDN
^[3]
文档

在 Vue 2 中使用CSS 变量

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

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

<template>

<div class="hello" :style="styleVar">
<div class="child-1">I am Child 1div>
<div class="child-2">I am Child 2div>
<div @click="onClick">Change Red TO Bluediv>
div>
template>

<script>
export default {
name: "HelloWorld",
props: {
msg: String,
  },
  data() {
return {
styleVar: {
"--colorBlue": "blue",
"--colorRed": "red",
"--fontSize": "30px",
"--fontSizeTest": "30px",
      },
    };
  },
methods: {
    onClick() {
this.styleVar["--fontSizeTest"] = "40px";
    },
  },
};
script>


<style scoped>
.child-1 {
color: var(--colorBlue);
font-size: var(--fontSize);
}
.child-2 {
color: var(--colorRed);
font-size: var(--fontSizeTest);
}
style>

结果：

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

onClick() {
this.styleVar["--fontSizeTest"] = "40px";
},

效果演示：

:style VS CSS 变量

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

<div class="child-1" :style="{ color: 'blue', fontSize: '30px' }">
  I am Child 1
div>

那我为什么还要使用 CSS
变量？这样大费周章是否真有意义？
我总结有如下两个原因：

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

通过 CSS
变量，就可以直接通过在组件的根元素设置变量，在组件内部