vue2在scss中使用data的变量

场景

我想给一个css类设置scale，需要根据data的变化来变化。因为使用这个类的元素是个组件库的弹窗，一开始是不存在的，所以不能直接写行内样式。

解决方案和示例

在data或者compute中给出前缀为--的css变量对象

computed: {
  cssVars() {
    return {
      '--color1': 'red',
      '--color2': 'blue'
    };
  }
}

在template中使用,注意cssVars一定要绑定在需要用到css变量的元素，或者该元素的上层元素上。如下面可以绑定div，也可以绑定在search-box上面，类似js的作用域

<template>
  <div :style="cssVars">
    <search-box class="test"/>
  </div>
</template>

在css代码中使用

<style lang="scss" scoped>
.test {
  /deep/ .el-form-item__label {
    color: var(--color) !important;
  }
}
</style>

参考链接：

vue在scss中使用data的变量
在CSS代码中使用JS变量