强制SASS做数学[重复](Force SASS to do math [duplicate])

强制SASS做数学[重复](Force SASS to do math [duplicate])

这个问题在这里已有答案：

数学与插值变量？ 1个答案

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

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

感谢帮助！

This question already has an answer here:

Math with interpolated variables? 1 answer

Trying to do math inside my loop.

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

But what I get in CSS, for example, is:

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

How can I force SASS to do math and get:

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

Thanks for help!

最满意答案

您将$ i值作为字符串放在z-index属性中。 如果要正确计算值，您应该这样做：

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

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

问候。

You are putting the $i value as a string in the z-index property. If you want to calculate the value correctly you should do it:

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

Also I recommend you to set a variable with the value of length to prevent multiple calls to this function.

Regards.