Sass 嵌套@each和嵌套列表的问题

我试图构建一个个人CSS框架，但在嵌套列表中使用嵌套@each时遇到了问题

我尝试了多种方式设置列表，包括地图。我试了两种方法。我现在所做的工作很有效，但我只是想把它干掉。我不介意我用什么方法。我只是讨厌代码的重复性

示例列表（我有大约十个）：

示例工作循环

@each $hue in $grays {
  $i: index($grays, $hue) - 1;
  .text-gray-#{$i} {
    color: $hue;
  }

  .background-gray-#{$i} {
    background-color: $hue;
  }
}

我试过的例子

$colors: $grays, $reds, $greens, $blues, $yellows, $oranges, $purples, $aquas,
  $pinks, $skyBlues;

@each $color in $colors {
  @each $hue in $color {
    $i: index($color, $hue) -1;
    .text-#{$hue}-#{i} {
      color: $hue;
    }
    .background-#{$hue}-#{i} {
      background-color: $hue;
    }
  }
}

我想要的是：

text-gray-0{
 color: colorHere
}
background-gray-0{
 background-color: colorHere
}
...
text-gray-12{
 color: colorHere
}
background-gray-12: colorHere
}

text-red-0{
 color: colorHere
}
background-red-0{
 background-color: colorHere
}
...
text-red-12{
 color: colorHere
}
background-red-12: colorHere
}

...

我得到的是：

.text-#121212-i {
  color: #121212; }

.background-#121212-i {
  background-color: #121212; }
...
.text-#eaeaea-i {
  color: #eaeaea; }

.background-#eaeaea-i {
  background-color: #eaeaea; }

.text-#490000-i {
  color: #490000; }

.background-#490000-i {
  background-color: #490000; }
...
.text-#ff6464-i {
  color: #ff6464; }

.background-#ff6464-i {
  background-color: #ff6464; }
...

---

这里的问题是您试图将变量名用作字符串。即使这是可能的（事实并非如此），使用当前代码，最终也会得到类似

.text-gray0-0

的类

您需要使用的是颜色地图：

$colors: (
  gray: $grays,
  red: $reds,
  ...
);

然后你可以做：

@each $color, $hues in $colors {
  @each $hue in $hues {
    $i: index($hues, $hue) - 1;

    .text-#{$color}-#{$i} {
      color: $hue;
    }

    .background-#{$color}-#{$i} {
      background-color: $hue;
    }
  }
}

除了在单独的变量中声明每个色调外，您还可以选择使用索引作为键的贴图，例如：

$grays: (
  0: rgb(18, 18, 18),
  1: rgb(36, 36, 36),
  ...
);

然后可以删除

$i:index（$hues，$hue）-1并使用以下命令：

@each $color, $hues in $colors {
  @each $index, $hue in $hues {
    .text-#{$color}-#{$index} {
       color: $hue;
     }

    .background-#{$color}-#{$index} {
       background-color: $hue;
     }
  }
}

非常感谢你！成功了！（第一种解决办法）。第二种方式会更受欢迎吗？两者都可以，由您选择您喜欢的方式。：）
@each $color, $hues in $colors {
  @each $index, $hue in $hues {
    .text-#{$color}-#{$index} {
       color: $hue;
     }

    .background-#{$color}-#{$index} {
       background-color: $hue;
     }
  }
}