在 vue 道具上绑定 sass 变量

Posted 2023-02-23

【中文标题】在 vue 道具上绑定 sass 变量

【英文标题】：Bind sass variable on vue props

【发布时间】：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>

【参考方案1】：

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

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

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