页面有多个通过循环遍历得到的标签,不确定个数,现在我想通过sass为每个标签附上不同的颜色,但是我在sass中的颜色数组只会有7个颜色元素,如何通过sass遍历确保每一个标签元素都能得到相应的样式。
sass只是css的预处理,并不能循环判断怎么给页面添加样式,想要实现你所说的效果,建议用js实现,动态给标签添加样式
发现刚才理解错误了,是7个颜色,然后数量不固定
那应该是SASS用@for,然后配合nth-child,7个就是7n+i
Sass代码
$ColorClass: (#111) (#222) (#333) (#444) (#555) (#666) (#777);
@mixin color($bgColor){
background-color: $bgColor;
}
@for $i from 1 through 7{
.item:nth-child(7n+#{$i}){
@include color(nth($ColorClass,$i));
}
}
生成的CSS:
.item:nth-child(7n+1) {
background-color: #111;
}
.item:nth-child(7n+2) {
background-color: #222;
}
.item:nth-child(7n+3) {
background-color: #333;
}
.item:nth-child(7n+4) {
background-color: #444;
}
.item:nth-child(7n+5) {
background-color: #555;
}
.item:nth-child(7n+6) {
background-color: #666;
}
.item:nth-child(7n+7) {
background-color: #777;
}
然后为item加上样式,例如
.item{
width:100%;
height:100px;
}
HTML代码:加入有10个item
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
最终的效果:
这样每个item都会有颜色了
:nth-child(),你看下这个,你的描述不是很清晰,但感觉应该可以用这个。大致代码如下
some-elem{
@for $i from 1 through 7 {
$n: '';
@if $i > 1 {
$n: 7n+#{$i - 1};
} @else {
$n: 7n;
}
&:nth-child(#{$n}){
color: nth($color, $i);
}
}
}
:nth-child
你得确定对应规则,看描述的意思好像没有必要sass循环,直接7个不同class对应相应样式,循环得到标签的时候带上需要的class名不就行了么