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

Answer 2

为什么不直接使用even和odd规则？就像这样，您将能够添加无限元素，而无需每次都触摸您的 CSS。

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

这是我的 Codepen 上的一个示例。