html - 基于类的Sass宽度计算

Question

我正在玩sassmixins并for在其中循环，并想问处理这种情况的最佳方法是什么：我在 UI 上有一个类，它可以是基于名称或基于索引的。因此，让我们深入研究代码。

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

解决方案1：

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

@mixin step-modifiers {
  @each $name, $hex in $steps {
    &.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%;
}

标签： htmlcsssass