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

Question

我有一个要发送到混入中的 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);
}

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

math in SCSS mixin as part of for loop

css

sass

compass-sass