生成相同内容的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); 
} 

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