Tworzenie nazwy klasy dynamicznej przy użyciu @while pętlę

Question

Chcę utworzyć następujące w arkuszu stylów używając SASS:

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

za pomocą pętli @while w SASS, takie jak następujące (wiem, że to trochę off, ja będzie go udoskonalić kiedyś dowiedzieć się, jak go skonfigurować):

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

Tak, wiem, że jest brzydki jak grzech, ale myślę, że to robi się w poprzek, co chcę. Ostatecznie $ whiteLevel i $ blackLevel (lub każdy, kogo w końcu nazywam) będą w pliku _base.scss, dzięki czemu będę mógł zmieniać różne poziomy i liczbę klas "w locie".

Czy można to zrobić i czy ktoś może wskazać mi właściwy kierunek?

Z góry dziękujemy i czekamy na wszelkie sugestie!

Edycja: W celu wyjaśnienia, mogę użyć następującego kodu, aby uzyskać ten sam rezultat:

$whiteLevel: 3; 

.cW { 
    color: white; 
} 

.cB { 
    color: black; 
} 

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

To daje:

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

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

Jakie jest rozwiązanie 99%, ale to oznacza, że ​​muszę mieć już określoną klasę, która pomieści @extend. Moim celem jest uczynienie tego całkowicie dynamicznym i zależnym od wartości $ whiteLevel i $ blackLevel. Jeśli ustawię je na 0, chcę zrobić to tak, aby żadna klasa nie została utworzona.

Nadzieję, że pomaga trochę wyjaśnić.

Edytuj edytuj!

Dzięki cimmanon tutaj jest rozwiązanie będę użyciu (na podstawie dostarczonych rozwiązania pokochałbyś że znak%):

$whiteLevel: 3; 

%cW { 
    color: white; 
} 

%cB { 
    color: black; 
} 

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

Dziękujemy cimmanon!

Answer 1

Aby poprawnie pisać, że ekspresja byłaby tak:

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

Ale zapominasz celu uwzględnienia przecinka, więc selektor kończy się wyglądać jak ten:

.dC4.dC5 { 
    color: black; 
} 

Nawet jeśli dodałeś przecinek, skończyłeś z wszystkimi 3 klasami poprzedzonymi przecinkiem. Istnieją bardziej skuteczne sposoby, aby robić to, co szukasz, które właściwie stanowią przecinkami:

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

wyjściowa:

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

.dC4, .dC5 { 
    color: black; 
}