Расчет на основе имени класса в SASS

Question

Я использую SASS и Angular 6. У меня есть имя класса level, созданное в javascript с динамическим суффиксом, например level-1 или level-10.Я хочу рассчитать заполнение в scss файле, зависит от этого суффикса.Должно быть что-то вроде этого:

level- $ {padding-left: calc ($ * 10) px}

Возможно ли это?

Answer 1

Да, вы можете написать цикл в SASS для генерации классов, например, так.

@for $i from 1 through 10 {
  .levels-#{$i} {
    padding-left: 10px * $i;
  }
}