monkeymanbob monkeymanbob - 4 months ago 16
CSS Question

SCSS loop interfering with transform: rotate

I'm trying my hand at scss for an animation and I'm having trouble with this loop. I'm trying to rotate 8 objects by 45 degrees each. When I type in:

@for $i from 1 through 8
#no#{$i}
transform: rotate(45*$ideg)


It breaks the compiler because it thinks the variable is $ideg. But the deg needs to be right against the number for the transform. When I put a space between, it doesn't work. Ideas?

Answer

You can interpolate it just like you did with the id selector:

@for $i from 1 through 8 
  #no#{$i}
    transform: rotate(#{45*$i}deg)
Comments