Создание динамических имен классов, используя @while цикл

Question

Я хочу создать следующий в таблице стилей с помощью SASS:

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

с использованием цикла @while в SASS, таких как следующее (я знаю, что это немного не я усовершенствует его, как только я понять, как установить его):

$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, поэтому я могу изменить разные уровни и количество классов «на лету».

Возможно ли это, и может ли кто-нибудь указать мне правильное направление?

Заранее благодарим и ожидаем услышать любые предложения!

Edit: Для того, чтобы выяснить, можно использовать следующий код, чтобы получить тот же результат:

$whiteLevel: 3; 

.cW { 
    color: white; 
} 

.cB { 
    color: black; 
} 

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

Это производит:

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

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

Какой 99% раствор, но это означает, что я должен имеют определенный класс, уже построенный для размещения @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; 
}