.child-1 { color: var(--colorBlue); font-size: var(--fontSize); } .child-2 { color: var(--colorRed); font-size: var(--fontSizeTest); } 结果：
我们只需要在组件的根元素中设置 :style="styleVar"（如果要该组件都可以使用，则必须放置在根元素下），就可以在 Vue 2.x 中实现组件中的状态和 CSS 值的绑定，而且这种绑定关系是响应式的，比如我定义一个方法，改变 font-size 的值，是可以实时更新的
onClick() { this.styleVar["--fontSizeTest"] = "40px"; },效果演示：
:style VS CSS 变量
这里有个问题，现有的 Vue 可以通过 :style 的方式定义去动态绑定 CSS，比如我可以直接在上面的 .child-1中做如下绑定，效果跟上面是一致的。
I am Child 1
那我为什么还要使用 CSS 变量？这样大费周章是否真有意义？
我总结有如下两个原因：
原因一：
复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。当组件中的一个状态被几十个地方用到时，那么你可能需要绑定很多个 :style。一来代码会显得可读性不强，二来性能上应该是比原生的要差，毕竟要将更改经过 Vue 的指令绑定到每一个元素上（这一点暂未验证）
通过 CSS 变量，就可以直接通过在组件的根元素设置变量，在组件内部
在 Vue 3 中的 SFC 中，style 标签支持 vars 绑定，该参数接受对象键值对方式注入 CSS 变量，如上所示
则编译过后，变成
h2 { color: var(--6b53742-color); }假如我们这种情况下想访问的是全局的 CSS 变量呢？也就是我们不希望加上 Scoped Id，那么要书写类似如下：
h2 { color: var(--color); font-size: var(--global:fontSize); }
这样会编译成如下结果：
h2 { color: var(--6b53742-color); font-size: var(--fontSize); }Less/Sass 中的变量 VS 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; /* color contrasts */ --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); color: var(--color-contrast-high); } [data-theme="dark"] { --color-primary: red; /* color contrasts */ --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; color: var(--primary); }以上是“为什么Vue3选择CSS变量”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前题目：为什么Vue3选择CSS变量
本文来源：http://cdkjz.cn/article/poojhs.html
