Trying to create a reusable component in Vue.js using Sass variables as props:
ButtonFilled(:title="'Next'" :backgroundColor="'$green'")
However, when trying to obtain the variable from props as shown below, it does not work. Is there a solution to this issue? I prefer using Sass variables over CSS variables like --green because of the built-in Sass functions like lightness(), darken(), etc., which are not supported by CSS variables.
<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>