は、私が使用してSASSスタイルシートに次のように作成したい@Whileループ

Question

を使用して動的なクラス名を作成します。のような

.dC1, .dC2, .dC3 { 
    color: white; 
} 
.dC4, .dC5 { 
    color: black; 
} 

SASSで@Whileループを使用して、以下の（私は、それは少しオフに知っています私はそれを設定する方法を見つけ出すたら）それを洗練されます：

$i: 1; 
$whiteLevel: 3; 
$blackLevel: 5; 
$val: nil; 

@while $i <= $whiteLevel { 
    $val: $val + .dC#{$i}; 
    $i: $i + 1; 
} 

$val { 
    color: white; 
} 

$val: nil; 

@while $i > $whiteLevel and $i <= $blackLevel { 
    $val: $val + .dC#{$i}; 
    $i: $i + 1; 
} 

$val { 
    color: black; 
} 

はい、私はそれが罪として醜いと知っているが、私はそれは私が何をしたい伝わると思います。最終的には、$ whiteLevelと$ blackLevel（または私がそれらを呼び出すまで）は_base.scssファイルに格納されますので、さまざまなレベルとクラス数を「オンザフライ」で変更できます。

これは可能でしょうか、誰かが正しい方向に向けることができますか？

ご協力いただきありがとうございます。ご意見をお待ちしております。

編集：

$whiteLevel: 3; 

.cW { 
    color: white; 
} 

.cB { 
    color: black; 
} 

@for $i from 1 through 5{ 
    .dC#{$i} { 
     @if $i <= $whiteLevel { 
      @extend .cW; 
     } @else { 
      @extend .cB; 
     } 
    } 
} 

これが生成します：私は同じ結果を得るために、次のコードを使用することができます明確にするために、99％のソリューションがあるが、それは私が持っていることを意味

.cW, .dC1, .dC2, .dC3 { 
    color: white; 
} 

.cB, .dC4, .dC5 { 
    color: black; 
} 

@extendに対応するために特定のクラスを既に構築しておいてください。私の目標はこれを完全に動的にし、$ whiteLevelと$ blackLevelの値に依存させることです。 0に設定すると、クラスが作成されないようにしたいです。

少し明確にするのに役立ちます。

編集編集！ここcimmanonする

おかげで（提供される解決策に基づいて、お奨めの愛という％記号）私が使用してするソリューションです。

$whiteLevel: 3; 

%cW { 
    color: white; 
} 

%cB { 
    color: black; 
} 

@for $i from 1 through 5{ 
    .dC#{$i} { 
     @if $i <= $whiteLevel { 
      @extend %cW; 
     } @else { 
      @extend %cB; 
     } 
    } 
} 

感謝cimmanon！正しくその式を記述するために

Answer 1

は次のようになります：

$val: $val + '.dC#{$i}'; 

しかし、あなたはコンマを説明するために忘れているので、あなたのセレクタは、このように見える終わる：

.dC4.dC5 { 
    color: black; 
} 

場合でも、コンマを追加した場合、コンマで始まる3つのクラスがすべて終了します。適切にカンマを占めますが、その探しているものを行うには、より効率的な方法があります。

$minLevel: 1; 
$whiteLevel: 3; 
$blackLevel: 5; 

%white { 
    color: white; 
} 

@for $i from $minLevel through $whiteLevel { 
    .dC#{$i} { 
     @extend %white; 
    } 
} 

$blackSelectors:(); 
@for $i from $whiteLevel + 1 through $blackLevel { 
    $blackSelectors: append($blackSelectors, unquote('.dC#{$i}'), comma); 
} 

#{$blackSelectors} { 
    color: black; 
} 

は出力：

.dC1, .dC2, .dC3 { 
    color: white; 
} 

.dC4, .dC5 { 
    color: black; 
}