Sass循环第n项

Question

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

我可以将我的4个不同的颜色变量放在Sass列表中，每个变量通过它们$color但是在该循环的内容块中我显然需要指定我正在讨论的<li>使用{ {1}} 1,2,3或4。

我不确定如何在循环的每个回合中指定我需要哪个:nth-of-type。

有什么想法吗？

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