SCSSで連番のClassを作成して、限られた色を回す

Before

// 色は4色
$colors:
        var(--blue-dark),
        var(--pale),
        var(--blue),
        var(--purple);

// 10が回す件数
$typeCount: 10 - 1;
.color {
  @for $i from 0 through $typeCount {
    $num: "";
    // ０埋め処理
    @if $i < 9 {
      $num: "0#{$i + 1}";
    } @else {
      $num: $i + 1;
    }
    &--type#{$num} {
      $n: nth($colors, $i % length($colors) + 1);
      border: 2px solid #{$n};
    }
  }
}

After

.color--type01 {
  border: 2px solid var(--blue-dark);
}
.color--type02 {
  border: 2px solid var(--pale);
}
.color--type03 {
  border: 2px solid var(--blue);
}
.color--type04 {
  border: 2px solid var(--purple);
}
.color--type05 {
  border: 2px solid var(--blue-dark);
}
.color--type06 {
  border: 2px solid var(--pale);
}
.color--type07 {
  border: 2px solid var(--blue);
}
.color--type08 {
  border: 2px solid var(--purple);
}
.color--type09 {
  border: 2px solid var(--blue-dark);
}
.color--type10 {
  border: 2px solid var(--pale);
}