Html 在SCSS中自动计算旋转度以将多个图元从0旋转到180

我正在尝试为车辆仪表板创建一个仪表集群

作为CSS示例，我想在

rotate（0deg）

和

rotate（180deg）

之间适当地分配41 div.tick

是否可以在纯SCS中自动进行此类计算

这是我的密码：

.放射状{
@对于从0到$1的$i{
.tick:n个子项（#{$i+1}）{
变换：旋转（$step+deg）；
}
}
}

它给我的是所有项目的

旋转（82度）

---

我想这就是你要找的。计算循环中的百分比

（$i/（$ticks-1））*$deg

$ticks: 41;
$deg: 180;

.radial {
  @for $i from 0 through $ticks - 1 {
    .tick:nth-child(#{$i + 1}) {
      transform: rotate( ($i / ($ticks - 1)) * $deg + deg ) ;
    }
  }
}

---

CSS输出可以在这里查看：

我想这就是您要找的。计算循环中的百分比

（$i/（$ticks-1））*$deg

$ticks: 41;
$deg: 180;

.radial {
  @for $i from 0 through $ticks - 1 {
    .tick:nth-child(#{$i + 1}) {
      transform: rotate( ($i / ($ticks - 1)) * $deg + deg ) ;
    }
  }
}

CSS输出可在此处查看：