I have some struggles with importing scss variable into my Vue 3 app. I have gloabal variable defined in colors like $some-class-danger or $some-class-success.

So I would need to import only $some-class and add danger or success property dynamicly.

So for now I have something like:

<style scoped lang="scss">
  @import "@/scss/variables/variables";
 
  .drop-color{
    color: $some-class-danger;
  }
</style>

So this works, but I need it to have v-bind(label) and looks like:

 <style scoped lang="scss">
      @import "@/scss/variables/variables";
     
      .drop-color{
        color: $some-class- v-bind(label);
      }
    </style>

but it's not working that way, any ideas how to fix it?