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

Question

我有一个mixin，用scss实现了进度条。

@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);

我需要能够动态地包含这个代码，在代码中的'66'代表进度，应该与我的控制器中的变量绑定。这是否可能？

谢谢

- Artur Alkaim

Answer 1

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

但是，仍然有解决方法可以更容易地解决这个问题，并且可以连接到您的Angular 2代码中。

在这种情况下，使用内联样式是可以接受的。这甚至是Bootstrap所做的事情（示例），这是一个非常常见的前端框架。这里有一个很好的链接示例，您可以看到Angular 2被用于通过HTML模板动态更改样式。

- sammyray