强迫SASS做数学

试着在我的循环中做数学题

@for $i from 1 through length($colors) {
  ul li:nth-child(#{$i}) {
    z-index: length($colors) - #{$i};
  }
}

但举例来说，我在CSS中得到的是：

li:nth-child(2) {
    z-index: 8-2;
}

我如何强迫SASS做数学运算并获得：

li:nth-child(2) {
    z-index: 6;
}

谢谢你的帮助

将$i值作为字符串放入z-index属性中。如果要正确计算该值，应执行以下操作：

$length: length($colors)
@for $i from 1 through length($colors) {
  ul li:nth-child(#{$i}) {
    z-index: $length - $i;
  }  
}

另外，我建议您设置一个值为length的变量，以防止多次调用此函数

---

问候。

这就成功了。谢谢设置一个变量是个好主意，但我没有使用服务器端SASS，所以我没有必要这样做。不管怎样，好的做法，我同意。