Автоматически вычислять степень вращения в SCSS, чтобы вращать несколько элементов от 0 до 180

Question

Я пытаюсь создать инструментальный кластер для приборной панели автомобиля.

В качестве примера CSS, я хочу распределить 41 div.tick между rotate(0deg) и rotate(180deg) соответственно.

Можно ли сделать такой расчет в чистом 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