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

Question

我有一个在 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”代表进度并且应该绑定到我的控制器中的变量。这甚至可能吗？

谢谢

Answer 1

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

但是，仍然有更简单的变通方法，并且可以挂接到您的 Angular 2 代码中。

在这种情况下，使用内联样式是可以接受的。这甚至是 Bootstrap 所做的事情（example), and it's an extremely common front-end framework. Here's a good 你看到 Angular 2 用于通过 HTML 模板动态更改样式。

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

Assign values dynamicaly to SASS mixin in Angular 2 - Ionic 2

sass

progress-bar

ionic2

angular