将SASS变量传递给Vue组件属性

Question

我对前端开发还是很陌生，我正在研究一个小的Vue组件，该组件基本上是Vuetify卡，其一侧有彩色边框。颜色是组件的属性。到目前为止，该方法有效：

<template>
  <v-card :style="borderColorStyle">
    <slot></slot>
  </v-card>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

export default Vue.extend({
  props: {
    color: {
      required: false,
      type: String as PropType<string>,
      default: null
    }
  },

  computed: {
    borderColorStyle () {
      if (this.color) {
        return `border-left: 5px solid ${this.color}`
      } else {
        return ''
      }
    }
  }
})
</script>

<style lang="sass" scoped>
  @import '@/sass/variables.sass'
  .v-card
    height: 100%
    border-left: 5px solid $my__darkgray
</style>

如您所见，我们使用SASS，并使用它来定义多种颜色。

现在，在使用此组件时如何使用这些SASS定义来设置颜色？

例如，如果我的variable.sass包含

$my_coolgreen: #288970

有什么办法可以做这样的事情吗？

<StatusCard color="my_coolgreen">
  Some text
</StatusCard>

Answer 1

通过班级

虽然您无法通过prop将Sass变量传递给Vue 2中的样式，但是可以应用使用Sass变量的CSS类。例如，此模板使用class binding根据.myClass的值有条件地应用color：

<template>
  <v-card :class="{ myClass: color === '$my_coolgreen' }">
  </v-card>
</template>

<style lang="scss" scoped>
  @import '@/sass/variables.sass'
  .myClass
    border-left: 5px solid $my_coolgreen
</style>

Vue 3 <style vars>

Vue 3的<style vars>（仍处于实验阶段）允许在样式块内将道具用作CSS custom properties，如下例所示。但是，Vuetify 2当前不支持Vue 3。

<style lang="scss" scoped vars="{ color }">
  @import '@/sass/variables.sass'
  .v-card
    border-left: 5px solid var(--color)
</style>

Answer 2

这就是我们最终要做的：

<template>
    <v-card :class="['pa-2','my__status__card', color]" style="background-color: white !important">
      <slot></slot>
    </v-card>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

export default Vue.extend({
  props: {
    color: {
      required: false,
      type: String as PropType<string>,
      default: 'info'
    }
  }
})
</script>

<style lang="sass">
  .v-card
    height: 100%

  .my__status__card
    border-style: solid !important
    border-left-width: 5px !important
    border-top-width: 0px !important
    border-bottom-width: 0px !important
    border-right-width: 0px !important
</style>

因此，我们给卡片提供了一种样式，该样式会删除除左侧边框以外的所有边框。 color属性仅适用于主题颜色。因此，这可能不是一个对所有人都有意义的解决方案，但这正是我们所需要的。