Sass 循环第 n 个项目

Question

这个问题在这里已经有了答案:





cycling through a list of colors with sass

(1 个回答)


6年前关闭。




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

我可以将我的 4 个不同颜色变量放在 Sass 列表中，每个变量都作为 $color但在该循环的内容块中，我显然需要指定哪个 <li>我说的是使用 :nth-of-type 1、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; }