html - 自动在SCSS中计算旋转度以将多个元素从0旋转到180

我正在尝试为车辆仪表板创建仪表盘。

作为CSS的示例，我想在rotate(0deg)和rotate(180deg)之间适当分配41 div.tick。

是否可以在纯SCSS中自动进行这样的计算？

这是我的代码：

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

它给我的是所有项目的rotate(82deg)

最佳答案

我认为这就是您要寻找的。计算循环内的百分比($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输出可以在这里查看：https://codepen.io/WebNesting/pen/LYYENaK

关于html - 自动在SCSS中计算旋转度以将多个元素从0旋转到180，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58270245/