Как получить значение выполнения математических действий внутри тега transform?

Question

[Tillorn]

Приветствую!

Есть цикл, из которого мы получаем число. По задумке, это число мы умножаем на величину шага и получаем нужное количество объектов, которые transform: rotate через нужный шаг. Но задумка не сработала) Как быть?

@for $i from 1 to 60 {
    &__scale:nth-child(n+#{$i})::before {
      content: "";

      position: absolute;

      width: 10px;
      border-bottom: 2px solid #000;
      border-radius: 2px;

      transform: rotate(#{$i} * 6deg);
      transform-origin: left center;
    }
  }

но в преобразованном CSS получаем ошибку и строчку, где математическое действие не выполнилось вида:
transform: rotate(1 * 6deg)

Answer 1

[Максим Морев]

Вам не нужна интерполяция при математических операциях внутри SASS:
transform: rotate($i * 6deg); и всё будет работать.

Интерполяция будет нужна, если вы будете работать с CSS функциями, например, с calc():
left: calc(#{$i}px + 10%);

Comments

[Tillorn]

Благодарю!