2

私は以下のサスを持っています。その中に、x が 1 ～ 7 の charx クラスがいくつかあります。それらのそれぞれを個別に定義する代わりに、より簡潔な方法でそれらを定義することは可能ですか? 

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

2 に答える 2

3

プレーン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;
}
于 2013-01-10T02:48:24.650 に答える
2

evenandoddルールを使用しないのはなぜですか。そうすることで、毎回 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の例です。

于 2013-01-10T03:13:22.177 に答える