在 vue 道具上绑定 sass 变量答案

【问题标题】：Bind sass variable on vue props在 vue 道具上绑定 sass 变量
【发布时间】：2021-04-03 22:35:19
【问题描述】：

我尝试在 vue js 上创建可重用组件，我使用 sass 变量来保持颜色、大小等的一致性。我不知道在 vue js 上使用 props 传递 sass 变量。如果我像这样直接在<style> 中使用它，它可以正常工作。

<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>

但是如果我像这样在道具中使用该变量，它就不能正常工作

<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>

【问题讨论】：

标签： javascript css vue.js sass

【解决方案1】：

我相信当你将样式放在style 标签中时，SASS 可以编译，但在它之外，它不能。

也许使用 CSS 变量而不是 SASS 可以帮助解决问题。

示例： backgroundColor: { default: "var(--bg-info)", type: String },

【讨论】：