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

Here's我的Codepen上的一个例子。

生成具有相同内容的css类

2 个答案: