SCSS loop interfering with transform: rotate

Question

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 1

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)

SCSS loop interfering with transform: rotate

Sign up