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

Я хочу создать следующее в таблице стилей с помощью 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, чтобы я мог менять разные уровни и количество классов "на лету".

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

Спасибо заранее и с нетерпением ждем предложений!

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

$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!

Ответы

Ответ 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;
}