Расчет ширины Sass на основе класса

Question

Я играю с циклом mixins и for в sass и хотел бы спросить, каков наилучший подход для обработки этого случая: у меня есть класс на пользовательском интерфейсе, который может быть либо на основе имени, либо на основе индекса. Итак, давайте углубимся в код.

className = {cn ('stepper', {step-${activeIndex}})}

решение 1:

$steps: (
  0: 0%,
  1: 33%,
  2: 66%,
  3: 99%,
);

@mixin step-modifiers {
  @each $name, $hex in $colors {
    &.step-#{$name} {
      width: $hex;
    }
  }
}

.stepper{
  @include step-modifiers;
}

решение 2:

$steps: 3;

@for $i from 0 through $steps {
  .step-#{$i} {
    width: (100% * $i / $steps);

  }
}

Ожидаемый результат

.stepper.step-0 {
  width: 0%;
}
.stepper.step-1 {
  width: 33%;
}
.stepper.step-2 {
  width: 66%;
}
.stepper.step-3 {
  width: 99%;
}