When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly use the variable in the <style> tag, everything works perfectly.
<template lang="pug">
button.button-filled {{ title }}
</template>
<script>
export default {
props: {
title: { default: "", type: String }
}
};
</script>
<style lang="sass">
.button-filled
background: $primary
padding: $p-1 $p-4
color: $white
font-weight: 500
</style>
https://i.stack.imgur.com/vKypR.png
However, when trying to use that variable within props, it does not behave as expected:
<template lang="pug">
button.button-filled(
:style="{ 'background': backgroundColor }"
) {{ title }}
</template>
<script>
export default {
props: {
backgroundColor: { default: "$bg-info", type: String },
title: { default: "", type: String }
}
};
</script>
<style lang="sass">
.button-filled
</style>