generate css classes with same content - css

Question

I have the below sass. In it I am have several charx classes, where x is between 1...7. is it possible to define them in a more concise way instead of defining each one of them individually ?
$first-color: #666666;
$second-color: #0066CC;
#mixin letter($color){
color: $color;
}
.char1{
#include letter($first-color);
}
.char2{
#include letter($second-color);
}
.char3{
#include letter($first-color);
}
.char4{
#include letter($second-color);
}
.char5{
#include letter($first-color);
}
.char6{
#include letter($second-color);
}
.char7{
#include letter($first-color);
}

Answer 1

You could possibly achieve the same effect with plain CSS:
$first-color: red;
$second-color: salmon;
span:nth-of-type(2n-1) {
color: $first-color;
}
span:nth-of-type(2n) {
color: $second-color;
}
Alternatively, your could use the #while directive:
$i: 1;
#while $i <= 7 {
.char#{$i}{
#include letter($first-color);
}
.char#{$i+1}{
#include letter($second-color);
}
$i: $i + 2;
}

Answer 2

Why don't you just use even and odd rules?
Like so you will be able to add infinite elements without touching your css every time.
$first-color: #666666;
$second-color: #0066CC;
#mixin letter($color){
color: $color;
}
.chars div:nth-child(even){
#include letter($first-color);
}
.chars div:nth-child(odd){
#include letter($second-color);
}
Here's an example on my Codepen.