html - 每个索引上的 SCSS for 循环 x 次

Question

我正在尝试实现这样的目标，但要使用更大的颜色数组。所以基本上我想在每个级别上使用每种颜色 5 次。问题是我的迭代在 5 次迭代后重置（我猜？）。任何人都可以帮助我哪里有错误？

.level-1 + .level-2 + .level-3 + .level-4 + .level-5 {
  color: blue;
}

.level-6 + .level-7 + .level-8 + .level-9 + .level-10 {
  color: red;
}

我使用 sass，所以我不必手动编写它。

到目前为止我有这个 sass 代码

$colors: #008b00, #0000ff, #ffff00, #bdb76b, #87ceeb, #8b5a2b, #FF7F00, #cdaf95, #00ffff, #e066ff, #00fa9a, #ff0000, #8b0000, #836fff, #828282, #ccff00, #191970, #8b1c62, #f0ec85, #ffaeb9, #ff5963, #2f4f4f, #ffc474, #30003d, #f9f5f5, #0069c1, #2eff00;
@for $i from 1 through length($colors){
    $index : nth($colors,$i);
    @for $c from 1 through 5 {
    .level-#{$i}{
        color: $index;
    }
}
}

这是我到目前为止的输出

.level-1 {
  color: #008b00;
}

.level-1 {
  color: #008b00;
}

.level-1 {
  color: #008b00;
}

.level-1 {
  color: #008b00;
}

.level-1 {
  color: #008b00;
}

.level-2 {
  color: #0000ff;
}

.level-2 {
  color: #0000ff;
}

.level-2 {
  color: #0000ff;
}

.level-2 {
  color: #0000ff;
}

.level-2 {
  color: #0000ff;
}

.level-3 {
  color: #ffff00;
}

.level-3 {
  color: #ffff00;
}

.level-3 {
  color: #ffff00;
}

.level-3 {
  color: #ffff00;
}

.level-3 {
  color: #ffff00;
}

.level-4 {
  color: #bdb76b;
}

.level-4 {
  color: #bdb76b;
}

.level-4 {
  color: #bdb76b;
}

.level-4 {
  color: #bdb76b;
}

.level-4 {
  color: #bdb76b;
}

.level-5 {
  color: #87ceeb;
}

.level-5 {
  color: #87ceeb;
}

.level-5 {
  color: #87ceeb;
}

.level-5 {
  color: #87ceeb;
}

.level-5 {
  color: #87ceeb;
}

.level-6 {
  color: #8b5a2b;
}

.level-6 {
  color: #8b5a2b;
}

.level-6 {
  color: #8b5a2b;
}

.level-6 {
  color: #8b5a2b;
}

.level-6 {
  color: #8b5a2b;
}

.level-7 {
  color: #FF7F00;
}

.level-7 {
  color: #FF7F00;
}

.level-7 {
  color: #FF7F00;
}

.level-7 {
  color: #FF7F00;
}

.level-7 {
  color: #FF7F00;
}

.level-8 {
  color: #cdaf95;
}

.level-8 {
  color: #cdaf95;
}

.level-8 {
  color: #cdaf95;
}

.level-8 {
  color: #cdaf95;
}

.level-8 {
  color: #cdaf95;
}

.level-9 {
  color: #00ffff;
}

.level-9 {
  color: #00ffff;
}

.level-9 {
  color: #00ffff;
}

.level-9 {
  color: #00ffff;
}

.level-9 {
  color: #00ffff;
}

.level-10 {
  color: #e066ff;
}

.level-10 {
  color: #e066ff;
}

.level-10 {
  color: #e066ff;
}

.level-10 {
  color: #e066ff;
}

.level-10 {
  color: #e066ff;
}

.level-11 {
  color: #00fa9a;
}

.level-11 {
  color: #00fa9a;
}

.level-11 {
  color: #00fa9a;
}

.level-11 {
  color: #00fa9a;
}

.level-11 {
  color: #00fa9a;
}

.level-12 {
  color: #ff0000;
}

.level-12 {
  color: #ff0000;
}

.level-12 {
  color: #ff0000;
}

.level-12 {
  color: #ff0000;
}

.level-12 {
  color: #ff0000;
}

.level-13 {
  color: #8b0000;
}

.level-13 {
  color: #8b0000;
}

.level-13 {
  color: #8b0000;
}

.level-13 {
  color: #8b0000;
}

.level-13 {
  color: #8b0000;
}

.level-14 {
  color: #836fff;
}

.level-14 {
  color: #836fff;
}

.level-14 {
  color: #836fff;
}

.level-14 {
  color: #836fff;
}

.level-14 {
  color: #836fff;
}

.level-15 {
  color: #828282;
}

.level-15 {
  color: #828282;
}

.level-15 {
  color: #828282;
}

.level-15 {
  color: #828282;
}

.level-15 {
  color: #828282;
}

.level-16 {
  color: #ccff00;
}

.level-16 {
  color: #ccff00;
}

.level-16 {
  color: #ccff00;
}

.level-16 {
  color: #ccff00;
}

.level-16 {
  color: #ccff00;
}

.level-17 {
  color: #191970;
}

.level-17 {
  color: #191970;
}

.level-17 {
  color: #191970;
}

.level-17 {
  color: #191970;
}

.level-17 {
  color: #191970;
}

.level-18 {
  color: #8b1c62;
}

.level-18 {
  color: #8b1c62;
}

.level-18 {
  color: #8b1c62;
}

.level-18 {
  color: #8b1c62;
}

.level-18 {
  color: #8b1c62;
}

.level-19 {
  color: #f0ec85;
}

.level-19 {
  color: #f0ec85;
}

.level-19 {
  color: #f0ec85;
}

.level-19 {
  color: #f0ec85;
}

.level-19 {
  color: #f0ec85;
}

.level-20 {
  color: #ffaeb9;
}

.level-20 {
  color: #ffaeb9;
}

.level-20 {
  color: #ffaeb9;
}

.level-20 {
  color: #ffaeb9;
}

.level-20 {
  color: #ffaeb9;
}

.level-21 {
  color: #ff5963;
}

.level-21 {
  color: #ff5963;
}

.level-21 {
  color: #ff5963;
}

.level-21 {
  color: #ff5963;
}

.level-21 {
  color: #ff5963;
}

.level-22 {
  color: #2f4f4f;
}

.level-22 {
  color: #2f4f4f;
}

.level-22 {
  color: #2f4f4f;
}

.level-22 {
  color: #2f4f4f;
}

.level-22 {
  color: #2f4f4f;
}

.level-23 {
  color: #ffc474;
}

.level-23 {
  color: #ffc474;
}

.level-23 {
  color: #ffc474;
}

.level-23 {
  color: #ffc474;
}

.level-23 {
  color: #ffc474;
}

.level-24 {
  color: #30003d;
}

.level-24 {
  color: #30003d;
}

.level-24 {
  color: #30003d;
}

.level-24 {
  color: #30003d;
}

.level-24 {
  color: #30003d;
}

.level-25 {
  color: #f9f5f5;
}

.level-25 {
  color: #f9f5f5;
}

.level-25 {
  color: #f9f5f5;
}

.level-25 {
  color: #f9f5f5;
}

.level-25 {
  color: #f9f5f5;
}

.level-26 {
  color: #0069c1;
}

.level-26 {
  color: #0069c1;
}

.level-26 {
  color: #0069c1;
}

.level-26 {
  color: #0069c1;
}

.level-26 {
  color: #0069c1;
}

.level-27 {
  color: #2eff00;
}

.level-27 {
  color: #2eff00;
}

.level-27 {
  color: #2eff00;
}

.level-27 {
  color: #2eff00;
}

.level-27 {
  color: #2eff00;
}

标签： htmlcsssasscolors