Erstellen Sie dynamische Klassennamen @While Schleife

Question

ich folgendes in einem Stylesheet mit SASS erstellen möchten:

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

mit einer @While Schleife in SASS wie die folgenden (ich weiß, es ist ein bisschen weg, ich wird es verfeinern, wenn ich, wie es einzurichten herauszufinden):

$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; 
} 

Ja, ich weiß, dass es als Sünde hässlich, aber ich denke, dass es über das bekommt, was ich will. Letztendlich befinden sich $ whiteLevel und $ blackLevel (oder was auch immer ich am Ende anrufe) in einer _base.scss-Datei, damit ich die verschiedenen Level und die Anzahl der Klassen "on the fly" ändern kann.

Ist es möglich, und kann mir jemand in die richtige Richtung zeigen?

Vielen Dank im Voraus und freuen uns auf Vorschläge!

Edit: Um zu klären, ich den folgenden Code verwenden kann, um das gleiche Ergebnis zu erhalten:

$whiteLevel: 3; 

.cW { 
    color: white; 
} 

.cB { 
    color: black; 
} 

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

Dies erzeugt:

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

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

Welches ist die 99% ige Lösung, aber es bedeutet, dass ich zu haben eine bestimmte Klasse bereits gebaut, um das @ Extend unterzubringen. Mein Ziel ist es, dies völlig dynamisch und abhängig von den Werten von $ whiteLevel und $ blackLevel zu machen. Wenn ich sie auf 0 setze, möchte ich es so machen, dass keine Klasse erstellt wird.

Hoffe, dass hilft ein wenig zu klären.

Bearbeiten bearbeiten!

Dank hier ist die Lösung cimmanon Ich werde mit (auf bereitgestellte Lösung basiert, Gotta Liebe, die Zeichen%):

$whiteLevel: 3; 

%cW { 
    color: white; 
} 

%cB { 
    color: black; 
} 

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

Vielen Dank cimmanon!

Answer 1

Um richtig, dass die Expression schreiben würde wie folgt sein:

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

Aber Sie vergessen für das Komma zu berücksichtigen, so dass Ihre Wähler endet wie folgt aufzublicken:

.dC4.dC5 { 
    color: black; 
} 

Auch wenn Sie haben das Komma hinzugefügt. Sie haben dann alle 3 Klassen mit einem Komma vor sich. Es gibt effizientere Möglichkeiten zu tun, was Sie suchen, dass Konto richtig für Kommata:

$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; 
} 

Ausgang:

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

.dC4, .dC5 { 
    color: black; 
}