SASS @for Problems

[koenigsegg1]

This is my first time using the @for directive, so there is probably an easy explanation.

I am trying to reproduce a pen, that I made earlier, using @for within a @mixin, but I cant see where I’ve gone wrong. Any help would be appreciated.

My original pen is here: http://codepen.io/koenigsegg1/pen/jWbrEx
My new pen is here: http://codepen.io/koenigsegg1/pen/MKJJzJ

[Paulie_D]

If you view the compiled CSS you can see the problem

transition-delay: 0.012s * 2;

Which is clearly not valid…so, we need to use calc…but we need to interpolate as well.

SCSS: transition-delay: calc(#{$delay} * #{$i});

http://codepen.io/Paulie-D/pen/bEgLBa

That said… a base value of .012s is really quick so I went with 0.4s instead.

[koenigsegg1]

Thanks! I never thought of using calc(). In my original pen, I did almost the same calculations without using the calc() function. could you explain why that worked and the second pen didn’t?

Code snippet from my original pen:

transition-delay: $delay*2;

Code snippet from my second pen:

transition-delay: 0.012s * 2;

[TheDoc]

Instead of using calc() and making the browser do a little bit of extra work I’d rather just interpolate the whole thing:

transition-delay: #{$delay * $i};

Which will give you:

transition-delay: 0.04s;

[koenigsegg1]

Thanks!

[Author]

Posts