Javascript expression in SCSS

Question

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?

Miriam Suzanne · Accepted Answer · 2012-08-29 21:42:46Z

2

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

answered Aug 29, 2012 at 21:42

Miriam Suzanne

14.1k2 gold badges42 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miriam Suzanne Over a year ago

Glad to hear it! Happy coding!

Collectives™ on Stack Overflow

Javascript expression in SCSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related