我的 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 表达式或者这是一种滥用?
最佳答案
核心 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;
}
}
关于SCSS 中的 Javascript 表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12184426/