Search code examples
javascriptrubycompass-sasssass

Javascript expression in SCSS

I have a @for loop in my SCSS file like:

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

Works fine. But I need to calculate some properties using javascript expressions like Math.sin() for example to have something like:

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

Get the error in SCSS compiler. Is there any way to use javascript expressions or it's an abuse?

Solution

  • The core Sass math is fairly simple, but Compass comes with a load of helpers, including sin() and cos() functions. Once you get Compass set up, you can do this:

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