математика в SCSS mixin как часть цикла цикла

Question

У меня есть цикл for, который я отправляю в mixin, но я хочу вычесть 1 из подсчета, когда я на самом деле делаю математику в -webkit-transform: rotate(($number*30)deg);. Я продолжаю получать недопустимые ошибки css ,

@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

Несколько вопросов в коде:

• Удалите # из $number определения.
• Вы можете умножить $number на Xdeg и это добавит единицы

Вот обновленная версия:

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

компилирует:

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