为什么 Vue3 选择了 CSS 变量

为什么 Vue3 选择了 CSS 变量

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

 

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

• 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 变量基础演示地址

<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 变量的命名是对大小写敏感的，也就是 -