Sass variable does not work if passed from props

Question

i tried to make reusable component on Vue.js with sass variable as props like this

ButtonFilled(:title="'Next'" :backgroundColor="'$green'")

however, if the variable is obtained from props like below, it doesn't work at all. is there any solution? By the way, I prefer to use sass variables instead of css variables like this --green because of some built-in sass functions like lightness (), darken () etc. Does not support variable css.

<template lang="pug">
  router-link.button.button-filled(
    :style="customStyling"
    to="/"
    tag="button"
  ) {{ title }}
</template>

<script>
export default {
  props: {
    backgroundColor: { default: "$red", type: String }
  },
  computed: {
    customStyling() {
      return [
        { background: `${this.backgroundColor}` }
      ];
    }
  }
};
</script>

SASS is compiled to CSS at build time, not at run time. What you want to do can only be done using custom properties (aka CSS variables). — connexo, Jan 01 '21 at 15:15
HI @connexo, thats right..but if I use css variables, there are a lot of things that can't be done. Starting from parameter `@function`, `@mixin` etc. And also built-in css functions like `lightness ()`, `darkness ()` etc. Is there a way to use the sass variable? or not possible? — kurakura, Jan 01 '21 at 15:28
Your question has already been answered in my previous comment. — connexo, Jan 01 '21 at 15:33

score 0 · Answer 1 · answered Jan 02 '21 at 18:31

You can't pass prop to Sass directly. You have to use a dynamic style prop like that:

<template>
   ButtonFilled(:style="{backgroundColor: green}")
   ...
</template>

<script>
export default {
   props: ['green']
   ...
}

...

(you can also refer to this answer)

This will add a background-color CSS property to element with the value of green.

Sass variable does not work if passed from props

1 Answers1