Create dynamic class names using @while loop [duplicate]

Answer 1

To correctly write that expression would be like this:

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

But you're forgetting to account for the comma, so your selector ends up looking like this:

.dC4.dC5 {
  color: black;
}

Even if you did add the comma, you'd end up with all 3 classes preceded by a comma. There are more efficient ways to do what you're looking for that properly account for commas:

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

Output:

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

.dC4, .dC5 {
  color: black;
}