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

【问题标题】：Assign values dynamicaly to SASS mixin in Angular 2 - Ionic 2在Angular 2-Ionic 2中为SASS mixin动态分配值
【发布时间】：2017-01-08 10:14:37
【问题描述】：

我有一个在 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);

我需要能够使其动态包含，其中代码中的“66”代表进度，应该绑定到我的控制器的变量。这甚至可能吗？

谢谢

【问题讨论】：

标签： angular sass progress-bar ionic2

【解决方案1】：

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

但是，仍有一些解决方法会更容易，并且可以与您的 Angular 2 代码挂钩。

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

【讨论】：