动态给scss变量赋值方案

方案1：CSS变量注入

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

<script setup>
import { ref } from 'vue'

const boxColor = ref('#42b983')
const boxSize = ref('200px')

const cssVars = {
  '--box-color': boxColor.value,
  '--box-size': boxSize.value
}
</script>

<style lang="scss">
.dynamic-box {
  width: var(--box-size);
  height: var(--box-size);
  background: var(--box-color);
  transition: all 0.3s;
  
  &:hover {
    background: darken(var(--box-color), 10%);
  }
}
</style>

方案2：动态类名绑定

<script setup>
defineProps({
  primaryColor: String
})
</script>

<style module lang="scss">
.text {
  color: v-bind(primaryColor);
}
</style>