math in SCSS mixin as part of for loop

Question

I have a for loop that I am sending into a mixin, but I want to subtract 1 from the count when I am actually doing the math in the -webkit-transform: rotate(($number*30)deg); I keep getting invalid css errors.

@mixin rotate($count){
  $number: #{$count}{-1};
    .sk-circle#{$count} {
    -webkit-transform: rotate(($number*30)deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}

@for $i from 2 through 12{
  @include rotate($i)
}

Answer 1

A few issues in the code:

• Remove the # from the $number definition.
• You can multiply $number by Xdeg and it will add the units

Here's the updated version:

@mixin rotate($count){
  $number: $count - 1;
    .sk-circle#{$count} {
    -webkit-transform: rotate($number*30deg);
    -ms-transform: rotate($number*30deg);
    transform: rotate($number*30deg);
  }
}

@for $i from 2 through 12{
  @include rotate($i)
}

compiles to:

.sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}