Question

在sass列表中，索引值是否可以用变量？

表示

$colors:#111 #222 #333 #444;
@for $i from 1 through 4 {
  :nth-child(#{$i}):after{
      background: nth($colors, #{$i});
   }
}

在sass nth(colors,index)中，index可以使用变量吗？

Answer 1

是即可。你的语法只有一些问题，而你没有定义'what'的第n个孩子。此示例显示如何将sass应用于列表项。这也使用数组的长度来确定循环的数量，而不是手动将其设置为4，使您的代码更具未来性。

$colors: #111 #222 #333 #444;
  @for $i from 1 through length($colors) {
    li:nth-child(#{length($colors)}n+#{$i}) {
    background: nth($colors, $i);
  }
}

https://jsfiddle.net/ggwa3bv1/1/

Answer 2

您可以改为使用地图https://jsfiddle.net/uyzk15d6/

$colors: (
    red: 1,
    green: 2,
    blue: 3,
    orange: 4
);

@each $color, $child in $colors {
    li:nth-child(#{$child}n) {
      background: $color;
   }
}

sass参数`$ n`的`nth（$ list，$ n）`必须是一个数字

2 个答案: