强制SASS做数学

Question

尝试在我的循环中做数学。

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

感谢您的帮助！

Answer 1

您将 $ i 值作为 z-index 属性中的字符串。如果要正确计算值，则应执行此操作：

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

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

问候。