sass - Sass 循环遍历第 n 个项目

Question

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

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

我不确定如何<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; }