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

Question

I have a mixin that implements in scss a progress bar.

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

I need to be able to make this include dynamically, where the '66' in the code represents the progress and should be bind to a variable form my controller. Is this even possible?

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 12:02

So, there's a bit of an issue with trying to dynamically update your Sass mixin - sass is something that is precompiled before browser rendering. So, even if you were able to pass in a dynamic variable, you would need to compile it, refresh the page (or inject it if you're running Gulp locally) and only then would you see a style update.

However, there are still workarounds to this that would be easier, and could be hooked in to your Angular 2 code.

In a case like this, it's acceptable to use an inline style. This is something that even Bootstrap does (example), and it's an extremely common front-end framework. Here's a good link to an example where you see Angular 2 being used to dynamically change a style via the HTML template.

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

1 Answers1