角度2 - イオン2でSASS mixinに動的に値を割り当てます

Question

私は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」は進歩を表して、私のコントローラを構成する変数にバインドされなければならないところ、これは動的に含ませることができるようにする必要があります。これも可能ですか？

おかげので

Answer 1

は、問題のビットは、動的にサスのミックスインを更新しようとしてあります - SASSはブラウザのレンダリング前プリコンパイルされているものです。したがって、動的変数を渡すことができたとしても、コンパイルしたり、ページを更新したり、Gulpをローカルで実行している場合は注入したりして、スタイルの更新を確認する必要があります。

しかし、回避方法はまだ簡単で、Angular 2コードにフックすることができます。

このような場合は、インラインスタイルを使用することができます。これはBootstrapでも（example）行うものであり、非常に一般的なフロントエンドフレームワークです。ここでは、link to an exampleがあります。角度2は、HTMLテンプレートを使用してスタイルを動的に変更するために使用されます。