SCSS mixin 中的数学作为 for 循环的一部分

Question

我有一个要发送到 mixin 的 for 循环，但是当我实际在 -webkit-transform: rotate(($number*30)deg); 中进行数学运算时，我想从计数中减去 1，我不断收到无效的 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);
}