sass - 强制 SASS 做数学

标签 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 - 强制 SASS 做数学，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25760202/

相关文章：

css - 如何使用 scss 为元素声明两个类