javascript - 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 表达式还是滥用？

score 2 · Accepted Answer

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

1 回答 1