2017-07-20 9 views
3

私は、反復的に背景色の彩度を上げるループミックスインを書こうとしています。ここでは、最新のミックスインのコードがあります:サスミックスインで彩度を上げる

@mixin generateBackgroundSteps($cell-count, $color) { 
    @for $i from 0 through $cell-count - 1 { 
     $percent: (5 * $i) + "%"; 
     $new-color: saturate($color, $percent); 

     &[setting-id="#{$i}"] { 
      background-color: $new-color;     
     } 
    } 
} 

どんなに私はこれを変えてきたか、生産CSSはちょうどこのように見える保ちません:

.rubric-design .rubric .create-new-criteria .create-criteria-initial- 
settings .create-criteria-setting[setting-id="2"] { 
     background-color: saturate(#90afc8); 
} 

多分それは私が$パーセントを形成しています方法です。それは明らかな何かでなければなりません!

答えて

3

percentage機能を試してみてください。完全に働いたSCSS

$percent: percentage((5 * $i)/(5 * $cell-count)); 

@mixin generateBackgroundSteps($cell-count, $color) { 
@for $i from 0 through $cell-count - 1 { 
    $percent: percentage((5 * $i)/(5 *$cell-count)); 
    $new-color: saturate($color, $percent); 

    &[setting-id="#{$i}"] { 
     background-color: $new-color;     
    } 
} 
} 
+0

percentage機能。ありがとうございました!私はそれをわずかに '$パーセント:パーセント((10 * $ i)/ 100)に変更しました; ' – webhound

+0

@webhound素晴らしい! –

関連する問題