创建一个SASS函数根据vuejs prop计算宽度

如何解决创建一个SASS函数根据vuejs prop计算宽度

预先感谢您的帮助。

我正在尝试在 sass 中创建一个函数，它接受 2 个道具值，计算百分比并将百分比作为宽度值返回。我正在使用引导程序进度条。

类需要是动态的，所以如果结果是 32，那么柱形需要是 32%。

这里是控制进度条宽度的容器

<div
  class="progress-bar bg-success"
  :class="'width-' + value"
  role="progressbar"
  :aria-valuenow="value"
  aria-valuemin="0"
  aria-valuemax="100"
></div>


<script>
export default {
  name: "Bar",props: {
    bar: String,value: Number,totalValue: Number
  }

};
</script>

<style lang="scss" scoped>
@function bar-width() {
  @return width(value/totalValue * 100);
}
</style>

这是我到目前为止所得到的，我觉得我走在正确的轨道上，任何帮助将不胜感激。

谢谢！

解决方法

正如@MichalLevý 在评论中正确指出的那样，不可能做你想做的事。 SCSS 在编译时生成，Vue 在运行时执行。所以所有的组合都必须在编译时就已经定义好了。

无论如何，您基本上有两种选择来解决您的问题：要么使用 SCSS 生成所有可能的类（如果您只有整数百分比值，则为 100 个类），这似乎是向每个客户端交付的不必要的代码量.或者您只需使用动态样式属性并使用常规 Vue 将百分比值绑定到该属性中。

我更喜欢第二种方法，因为它更干净。但是需要注意的是，在这种情况下，如果不将 unsafe-inline 添加到样式部分，就不能使用 CSP。然而，当值发生变化时，仍然可以使用 JavaScript 设置 style 属性（不使用 style 属性）（Vue watcher）。

这是最简单形式的第二种解决方案：

<div :style="{ width: `${percent}%` }" />