SCSS 中的 Javascript 表达式

Question

我的 SCSS 文件中有一个 @for 循环，例如:

@for $i from 1 through 12 {
    .cell:nth-child(#{$i}) {
        … //some code here
    }
}

工作正常。但我需要使用 JavaScript 表达式(例如 Math.sin())来计算一些属性，例如:

@for $i from 1 through 12 {
    .cell:nth-child(#{$i}) {
        top: Math.sin(90) * 150 * -1;
        left: Math.cos(90) * 150;
    }
}

在 SCSS 编译器中出现错误。有没有办法使用 javascript 表达式或者这是一种滥用？

Answer 1

核心 Sass 数学相当简单，但是 Compass负载为helpers ，包括 sin() 和 cos() 函数。设置 compass 后，您可以执行以下操作:

@for $i from 1 through 12 {
    .cell:nth-child(#{$i}) {
        top: sin(90) * 150 * -1;
        left: cos(90) * 150;
    }
}