Sass循环遍历第n项。

Question

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

我可以把4个不同的颜色变量放在Sass列表中，并且通过$color循环遍历它们，但在循环块的内容中，我需要使用:nth-of-type指定我正在处理哪个<li>，分别是1、2、3或4。

我不确定如何在每次循环时指定需要哪个<li>。

你有什么想法吗？

- rctneil

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

- Krasimir