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

Question

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