css - 生成具有相同内容的CSS类

Question

我有下面的 sass。在其中我有几个 charx 类，其中 x 在 1...7 之间。是否有可能以更简洁的方式定义它们而不是单独定义它们中的每一个？

$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

您可以使用纯 CSS 实现相同的效果:

$first-color: red;
$second-color: salmon;

span:nth-of-type(2n-1) {
  color: $first-color;
}

span:nth-of-type(2n) {
  color: $second-color;
}

或者，您可以使用 @while指令:

$i: 1;
@while $i <= 7 {
  .char#{$i}{
    @include letter($first-color);
  }

  .char#{$i+1}{
    @include letter($second-color);
  }  

  $i: $i + 2;
}