Vue 3/Sass: use v-bind inside rgb()

Question

I want to pass a color variable as a prop to a Vue.js component. When I try to use it in my SASS code like this:

<script>
export default {
  props: {
    backgroundColor: String
  }
};
</script>

.cta
  position: relative
  margin: auto
  &:before
    background: rgba(v-bind(backgroundColor),0.5)

I get an error that says [sass] $color: v-bind(backgroundColor) is not a color.

When I use it like this:

background: rgba(var(v-bind(backgroundColor)),0.5)

I don't get an error, but the CSS code doesn't work.

I will pass a hex-color string as a prop, and I want to convert it to rgba to adjust the opacity. What is the correct way to make this work?

Answer 1

Not sure if this can be fixed on user side. As a workaround, you can bind to a CSS variable and put this into rgb():

.cta
  &:before
    --background-color: v-bind(backgroundColor)
    background: rgba(var(--background-color),0.5)