为什么Vue3选择CSS变量

时间：2023-03-31 00:53:03 CSS

.child-1{color:var(--colorBlue);字体大小：var(--fontSize);}.child-2{颜色：var(--colorRed);font-size:var(--fontSizeTest);为什么Vue3选择CSS变量Vue3增加了一个实验性的特性——“单文件组件状态驱动的CSS变量”看到这里，我心里有以下疑问？什么是CSS变量？Sass/Less中不是有变量的定义吗，为什么要用CSS变量呢？现有的vue并没有定义:style来动态绑定css，那么css变量和这个方法有什么区别呢？Vue3做了哪些操作让SFC（Single-FileComponents）能够更好的使用CSS变量。下面讨论这些问题。CSS变量基础知识CSS变量不是某个框架的产物，而是CSS作者定义的标准规范CSS变量，也称为CSS自定义属性，包含可以在整个文档中重复使用的值。通过自定义属性标记设置值（例如：--main-color:black;），通过var()函数获取值（例如：color:var(--main-color);）为什么选择两个连字符（--）表示？因为变量?由Sass使用，@由Less使用。为了不引起冲突，官方的CSS变量改为两行连字符。CSS变量的简单示例如下：CSS变量基础演示地址我是Parent我是Child

.parent{/*变量的作用域是它所在的选择器的有效作用域，所以.parent不能读取child中的变量*/color:var(--body-child);/*定义变量*/--parent-color:blue;}.child{/*通过var读取变量*/color:var(--parent-color);--child-color:green;}结果表明我们现在定义变量--parent-color:blue;在.parent中，并在.child中使用color:var(--parent-color)；需要注意的是变量的作用域是它在Scope中的选择器的有效性，比如--child-color:green；定义在.child中，不能在.parent中读取，只对.child元素下的元素有效。如果想在HTML文档中可以访问，可以定义class:root中除了基本使用外，还有以下几点需要注意CSS变量的命名是区分大小写的，即--myColor和--mycolor不一样。var()参数可以使用第二个参数设置默认值。当变量无效时，将使用默认值。CSS变量为JavaScript提供了一种与CSS通信的方式。在JS中，我们可以操作CSS，和操作普通的CSS属性一样//获取一个Dom节点上的CSS变量element.style.getPropertyValue("--my-var");//获取任意一个CSS变量Dom节点getComputedStyle(element).getPropertyValue("--my-var");//修改一个Dom节点上的CSS变量element.style.setProperty("--my-var",jsVar+4);这里是最简单的使用，具体可以查看MDN文档。在Vue2中使用CSS变量前面说过，CSS变量不是某个框架的产物，而是原生CSS的标准规范，所以在Vue2中直接使用CSS变量是肯定可以的，没有任何限制。关键是我们如何将Vue组件中的状态同步到CSS变量中，其实很简单，通过Style绑定即可。Vue2demo地址.child-1{color:var(--colorBlue);字体大小：var(--fontSize);}.child-2{颜色：var(--colorRed);font-size:var(--fontSizeTest);结果：我们只需要在元素中设置：style="styleVar"（如果你想要这个组件，可以如果使用，必须放在根元素下），可以实现组件中的状态与Vue2.x中的CSS值的绑定，这种绑定关系是响应式的。比如我定义一个改变字体的方法-size的值可以实时更新onClick(){this.styleVar["--fontSizeTest"]="40px";}，效果演示：有问题withstyleVSCSS变量，现有的Vue可以通过定义:style来动态绑定CSS。比如我可以直接在上面的.child-1中做如下绑定，效果和上面一样。我是Child1

为什么我还在使用CSS变量？如此努力真的有意义吗？我总结有以下两个原因：原因一：复杂的网站会有大量的CSS代码，而且通常会有很多重复的值。当组件中的状态被数十个地方使用时，您可能需要绑定许多:styles。首先，代码会显得不可读，其次，性能应该比原来的差。毕竟需要通过CSS变量，将变化的Vue指令绑定到每个元素上（这个还没有验证）。可以直接在组件的根元素中设置变量，直接在组件内部的在Vue3的SFC中，style标签支持vars绑定，接受对象键值对注入CSS变量，如上所示。效果可以看Vue3demo地址。这些变量将直接绑定到组件的根元素。上面的例子，最终的渲染结果如下：一起使用，应用的CSS变量会以组件的scopedid为前缀，访问时会自动加上scopedid。比如我们这样写如下：color);}如果在这种情况下我们想要访问的是全局CSS变量？也就是说，我们不想添加ScopedId，所以我们需要这样写：h1{color:var(--color);font-size:var(--global:fontSize);}这将编译成以下结果：h1{color:var(--6b53742-color);font-size:var(--fontSize);}Less/SassVSCSS变量中的变量我理解的最重要的一点是CSS变量可以更好的和JavaScript进行通信，相当于CSS和JavaScript之间的桥梁。这在Vue中是相当明显的让我们看另一个切换主题的例子，如果我们使用Sass变量，如下：$color-primary:blue;$color-text:black;$color-bg:white;/*invert*/$color-primary-invert:red;$color-text-invert:white;$color-bg-invert:black;.component{color:$color-text;背景色：$color-bg；a{颜色：$color-primary;}}.component--dark{颜色：$color-text-invert;背景色：$color-bg-invert；a{颜色：$color-primary-invert;我们有两个主题，一个普通主题和一个黑暗模式（dark）。请注意，在深色模式下，我们需要新的颜色变量来更新旧的颜色变量。如果有很多这样的设置，我们会很苦恼。查看CSS变量设置：root,[data-theme="default"]{--color-primary:blue;/*颜色对比*/--color-bg:white;--color-contrast-lower:hsl(0,0%,95%);--color-contrast-low:hsl(240,1%,83%);--color-contrast-medium:hsl(240,1%,48%);--color-contrast-high:hsl(240,4%,20%);--color-contrast-higher:black;}[data-theme]{background-color:var(--color-bg);颜色：var(--color-contrast-high);}[data-theme="dark"]{--color-primary:red;/*颜色对比*/--color-bg:black;--color-contrast-lower:hsl(240,6%,15%);--color-contrast-low:hsl(252,4%,25%);--color-contrast-medium:hsl(240,1%,57%);--color-contrast-high:hsl(0,0%,89%);--color-contrast-higher:white;}在这种情况下，我们不需要定义额外的颜色变量，因为我们只需要设置CSS变量上述用法不同的原因是正确的值足够。我的理解是SASS变量是编译的，也就是说预处理器在输出给浏览器之前已经解析过了，浏览器通过运行来解析css变量另外预处理器和css变量不冲突，它们的组合可以更好的提升我们的开发体验缺点——浏览器兼容性问题目前对CSS变量的支持不是特别好，IE目前也不是全部支持，但是如前所述，我们还是看好它的未来，处理它的兼容性，我们可以也写成：a{color:#7F583F;颜色：var(--primary);}总结最后总结一下文章开头提出的问题：什么是CSS变量？CSS变量也称为CSS自定义属性，它们包含的值可以在整个文档中重复使用。现有的Vue并没有定义:style来动态绑定CSS，那么CSS变量和它有什么区别呢？复杂的网站会有大量的CSS代码，通常会有很多重复值的伪元素。Vue3做了哪些操作，让SFC（单文件组件）可以更好的使用CSS变量添加vars绑定和增强作用域功能。Sass/Less中不是有变量定义吗，为什么要用CSS变量？CSS变量可以更好的和JavaScript进行通信，相当于CSS和JavaScript之间的桥梁。SASS变量在编译时，CSS变量在运行时。参考CSS变量教程WhywepreferCSSCustomPropertiestoSASSvariables