在 Angular 2 - Ionic 2 中动态为 SASS mixin 分配值

Art*_*aim 5 sass progress-bar ionic2 angular

我有一个在 scss 中实现进度条的 mixin。

@mixin progressBarMix($name, $size, $perc, $color, $colorBack) {
  .progressBarWrapper {
    &#{$name} {
      $sizeFill: $size / 100 * $perc;

      .progressBarEndFilled {
        background-color: rgba($color, 1);
        left: $sizeFill;
      }

      .progressBarEnd {
        background-color: $colorBack;
      }
    }
  }
}

@include progressBarMix('.progressBar', 232px, 66, $bar, $barBackground);
Run Code Online (Sandbox Code Playgroud)

我需要能够动态地包含此内容,其中代码中的“66”代表进度,并且应该绑定到我的控制器中的变量。这可能吗?

谢谢

小智 2

因此,尝试动态更新 Sass mixin 存在一些问题 - sass 是在浏览器渲染之前预编译的东西。因此,即使您能够传入动态变量,您也需要编译它,刷新页面(或者如果您在本地运行 Gulp,则注入它),然后您才会看到样式更新。

然而,仍然有一些更简单的解决方法,并且可以连接到您的 Angular 2 代码中。

在这种情况下,使用内联样式是可以接受的。这甚至是 Bootstrap 所做的事情(示例),并且它是一个非常常见的前端框架。这是一个很好的示例链接,您可以在其中看到 Angular 2 用于通过 HTML 模板动态更改样式。