在Angular 2中爲SASS mixin動態分配值 - Ionic 2

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的mixin - 上海社會科學院的東西是預編譯前瀏覽器的渲染。因此，即使您能夠傳入動態變量，您也需要編譯它，刷新頁面（或者在本地運行Gulp時注入它），然後才能看到樣式更新。

但是，仍然有一些解決方法可以更容易，並且可以吸引到您的Angular 2代碼中。

在這種情況下，可以使用內聯樣式。這是Bootstrap所做的事情（example），這是一個非常常見的前端框架。這裏有一個很好的link to an example，你可以看到Angular 2被用來通過HTML模板動態地改變樣式。