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

Question

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

作为 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)

Answer 1

我想这就是您要找的。计算循环内的百分比 ($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