math in SCSS mixin as part of for loop - css

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