创建一个基于 vuejs prop 计算宽度的 SASS 函数答案

【问题标题】：Creating a SASS function to calculate the width based on vuejs prop创建一个基于 vuejs prop 计算宽度的 SASS 函数
【发布时间】：2021-09-10 19:15:08
【问题描述】：

提前感谢您的帮助。

我正在尝试在 sass 中创建一个函数，该函数采用 2 个 prop 值，计算百分比并将百分比作为宽度值返回。我正在使用引导进度条。

类需要是动态的，所以如果结果是 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>

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

谢谢！

【问题讨论】：

很抱歉让您失望，但您完全走错了路。 SASS 函数仅在构建时执行（SASS 编译为纯 CSS），因此您不能在运行时使用它（当您的 Vue 应用程序在用户浏览器中运行时）

标签： vue.js sass vue-props

【解决方案1】：

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

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

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

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

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

【讨论】：