Vue version

3.3.2

Link to minimal reproduction

https://github.com/dvdmlln/vue-scss-rgb-v-bind

Steps to reproduce

Use v-bind in css rgb function in style block with scss

What is expected?

The variable works in the rgb function

What is actually happening?

An error occurs: Internal server error: [sass] Missing element $green.

System Info

No response

Any additional comments?

I don't know if this bug belongs here or anywhere else.

If I assign the JS variable to a css variable using v-bind first and then use the css variable in the rgb function it works:

<style lang="scss">
.headline {
  --color: v-bind(color);
  color: rgb(var(--color));
}
</style>

Plain css also works:

<style>
.headline {
  color: rgb(v-bind(color));
}
</style>

the same question as https://github.com/vuejs/core/issues/8117 When using the 'v-bind css' function, expressions can be added.

<script>
const color = '255 0 0'
</script>
<style>
div {
   background: v-bind('`rgb(${color})`');
}
</style>

rgb works, but rgba still doesn't work, what's wrong?

<script setup>
const color = '255 0 0'
</script>

<template>
  <div class="headline">Headline</div>
</template>

<style lang="scss">
.headline {
  // works:
  color: v-bind('`rgb(${color})`');

  // doesn't work:
  color: v-bind('`rgba(${color}, 0.5)`');
}
</style>

rgb works, but rgba still doesn't work, what's wrong?

<script setup>
const color = '255 0 0'
</script>

<template>
  <div class="headline">Headline</div>
</template>

<style lang="scss">
.headline {
  // works:
  color: v-bind('`rgb(${color})`');

  // doesn't work:
  color: v-bind('`rgba(${color}, 0.5)`');
}
</style>

This writing method itself is problematic in CSS

should be v-bind('rgba(${color} / 0.5)') see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb