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>

vue3 v-bind CSS变量注入

<template>
  <span> style v-bind CSS变量注入</span>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const color = ref('red')
</script>
<style scoped>
  span {
    /* 使用v-bind绑定组件中定义的变量 */
    color: v-bind('color');
  }
</style>

参考链接：

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