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

我对前端开发还是个新手，我正在开发一个小型的Vue组件，它基本上是一面有彩色边框的Vuetify卡。颜色是组件的一个属性。到目前为止，这是有效的：

从“Vue”导入Vue，{PropType}
导出默认Vue.extend({
道具：{
颜色：{
必填项：false，
类型：字符串作为PropType，
默认值：null
}
},
计算：{
borderColorStyle（）{
如果（这个颜色）{
return`border left:5px solid${this.color}`
}否则{
返回“”
}
}
}
})
@导入“@/sass/variables.sass”
.信用卡
身高：100%
左边框：5px实心$my_u darkgray

如您所见，我们使用SASS，并使用它定义了许多颜色

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

例如，如果my variables.sass包含

$my_coolgreen: #288970

我有办法做这样的事吗

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

一些文本

Via classes 虽然无法通过道具将Sass变量传递给Vue 2中的样式，但可以应用使用Sass变量的CSS类。例如，此模板用于基于

颜色的值有条件地应用
.myClass
：


@导入“@/sass/variables.sass”
.myClass
左边框：5px实心$my_coolgreen

Vue 3

Vue 3（仍然是实验性的）允许在样式块内部使用道具，如下例所示。但是，Vuetify 2目前不支持Vue 3


@导入“@/sass/variables.sass”
.信用卡
左边框：5px实心变量（--颜色）
以下是我们最终要做的事情：


从“Vue”导入Vue，{PropType}
导出默认Vue.extend({
道具：{
颜色：{
必填项：false，
类型：字符串作为PropType，
默认值：“信息”
}
}
})
.信用卡
身高：100%
.我的身份卡
边框样式：纯色！重要的
左边框宽度：5px！重要的
边框顶部宽度：0px！重要的
边框底部宽度：0px！重要的
右边框宽度：0px！重要的

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