如何通过Vue的style绑定动态设置SCSS变量？

嘿，我来帮你理清楚这个问题～首先得明确：你原来的写法行不通，原因很简单——SCSS变量是编译时处理的，在项目打包编译的时候，$backgroundColor: red就会被直接替换成red写到最终的CSS里了，而Vue的:style是运行时给DOM元素加行内样式的，这俩根本不在一个阶段，所以你试图用:style绑定$backgroundColor完全没用，SCSS根本不会在运行时理这个变量。

不过你的需求完全可以实现，只是得换个思路，用CSS自定义属性（也就是CSS变量）来代替SCSS变量，因为CSS变量是运行时生效的，刚好能和Vue的动态属性绑定配合。

正确实现方式（推荐） #

下面是调整后的代码示例，你可以直接用，还能通过props传入颜色值：

<template>
  <div id="app" :style="{ '--background-color': bgColor }">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['bgColor'], // 这里接收父组件传入的颜色属性
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
p {
  // 用var()引用CSS变量，第二个参数是默认值（没传bgColor时用red）
  background: var(--background-color, red);
}
</style>

原理说明 #

• CSS变量（比如--background-color）是存在于DOM元素上的，可以通过Vue的:style动态修改它的值，这是运行时的操作，完全适配你通过组件属性传值的需求。
• 子元素可以通过var()来引用父元素上的CSS变量，如果你想让这个变量全局可用，也可以把它绑定到body或者根组件上。

关于SCSS变量的补充 #

如果一定要用SCSS变量实现类似效果，那只能在编译阶段处理，比如通过Vue的样式预处理器结合条件编译，但这种方式是静态的——编译完成后样式就固定了，没法在运行时通过传入的props动态改变，所以完全不推荐这种方式，远不如CSS变量灵活。

内容的提问来源于stack exchange，提问作者Sisky