为什么Vue3选择CSS变量

时间：2023-03-13 20:00:45 科技观察

.child-1{color:var(--colorBlue);font-size:var(--fontSize);}.child-2{color:var(---colorRed);font-size:var(--fontSizeTest);？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变量基本演示地址IamParentIamChild

/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中使用颜色：var(--parent-color);需要注意的是变量的作用域是它所在的选择器的有效作用域，比如在.child中定义的--child-color:green;，在.parent中是读不到的，只对.child元素下的元素。如果想在HTML文档中可以访问，可以在类中定义：root除了Basicuse，还有以下几点需要注意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);这里是最简单的用法，在Vue2中使用CSS变量的细节可以查看MDN文档，上面说了CSS变量不是某个框架的产物，而是原生的CSS根据按照标准规范，在Vue2中直接使用CSS变量是肯定可以的，没有任何限制，关键是我们如何将Vue组件中的状态同步到CSS变量中，其实很简单，通过Style绑定即可.Vue2demo地址.child-1{color:var(--colorBlue);font-size:var(--fontSize);}.child-2{color:var(---colorRed);font-size:var(--fontSizeTest);结果：我们只需要在组件的根元素中设置：style="styl"eVar”（如果想让组件可用，必须放在根元素下），在Vue2.x中就可以实现组件中状态和CSS值的绑定，这种绑定关系是响应式的例如，我定义了一个改变font-size值的方法，可以实时更新onClick(){this.styleVar["--fontSizeTest"]="40px";}，效果演示：:styleVSCSS变量这里有个问题，现有的Vue可以通过定义:style来动态绑定CSS，比如我可以直接在上面的.child-1中做如下绑定，效果和上面的IamChild1

那我为什么还要用CSS变量？花那么多时间真的有意义吗？我总结有两个原因：原因一：复杂的网站会有很多CSS代码，而且通常会有很多重复的值，当一个组件中的状态被几十个地方使用时，那么你可能需要绑定很多：样式。首先，代码会显得不可读，其次，性能应该比原来的差。毕竟需要通过CSS变量，将变化的Vue指令绑定到每个元素上（这个还没有验证）。可以直接在组件的根元素中设置变量，直接在组件内部的在Vue3的SFC中，style标签支持vars绑定如果指定，该参数接受对象键值对注入CSS变量，如图在之上。效果可以看Vue3demo地址。这些变量将直接绑定到组件的根元素。在上面的例子中，最终的渲染结果如下：hello

和一起使用当vars和一起使用，应用的CSS变量会以组件的scopedid为前缀，访问时会自动加上scopedid。比如我们这样写：;}如果我们想要访问全局CSS变量怎么办？也就是说，我们不想添加ScopedId，所以我们需要这样写：h1{color:var(--color);font-size:var(--global:fontSize);}这将被编译成以下结果：h1{color:var(--6b53742-color);font-size:var(--fontSize);}Less/SassVS中的变量CSS变量我理解最重要的一点就是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;background-color:$color-bg;a{color:$color-primary;}}.component--dark{color:$color-text-invert;background-color:$color-bg-invert;a{color:$color-primary-invert;}}我们有两个主题，一个普通主题和一个黑暗模式（dark）。请注意，在深色模式下，我们需要新的颜色变量来更新旧的颜色变量。如果有很多这样的设置，我们会很苦恼。查看CSS变量设置：root,[data-theme="default"]{--color-primary:blue;/*colorcontrasts*/--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-对比度高:hsl(240,4%,20%);--颜色对比度更高:黑色;}[数据主题]{背景颜色:var(--color-bg);color:var(--color-contrast-high);}[data-theme="dark"]{--color-primary:red;/*colorcontrasts*/--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变量在广告中dition、预处理器和CSS变量并不冲突，它们的结合可以更好的提升我们的开发体验。缺点——浏览器兼容性问题目前对CSS变量的支持不是特别好，IE目前也不是全部支持，但是如前所述，我们还是看好它的未来，处理好它的兼容性。我们也可以这样写：a{color:#7F583F;color:var(--primary);}几个问题：什么是CSS变量？CSS变量也称为CSS自定义属性，它们包含的值可以在整个文档中重复使用。现有的Vue并没有定义:style来动态绑定CSS，那么CSS变量和它有什么区别呢？复杂的网站会有大量的CSS代码，通常会有很多重复值的伪元素。Vue3做了哪些操作，让SFC（单文件组件）可以更好的使用CSS变量添加vars绑定和增强作用域功能。Sass/Less中不是有变量定义吗，为什么要用CSS变量？CSS变量可以更好的和JavaScript进行通信，相当于CSS和JavaScript之间的桥梁。SASS变量在编译时，CSS变量在运行时