Sass循环第n项

Question

我有4个列表项,我每个都需要不同的背景颜色.

我可以将我的4个不同的颜色变量放在Sass列表中,每个都通过它们,$color但是在该循环的内容块中,我显然需要指定<li>我在谈论使用:nth-of-type1,2,3或4.

我不知道如何<li>在循环的每个回合中指定我需要的东西.

有任何想法吗？

Answer 1

这应该做的伎俩:

$colors: (#000, #F00, #0F0, #00F);
@for $i from 1 through length($colors) {
   li:nth-of-type(#{$i}) {
       background: nth($colors, $i);
   }
}

它产生:

li:nth-of-type(1) {
  background: black; }

li:nth-of-type(2) {
  background: red; }

li:nth-of-type(3) {
  background: lime; }

li:nth-of-type(4) {
  background: blue; }