Question

我正在尝试构建个人CSS框架，但在嵌套列表上使用嵌套@each时遇到了麻烦。

我尝试过多种方式设置列表，包括地图。我已经尝试过@for和@each。我目前正在做的事情有效，但我只是想把它弄干。我不在乎我使用什么方法。我只是讨厌代码的重复性。

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

$gray0: rgb(18, 18, 18);
$gray1: rgb(36, 36, 36);
$gray2: rgb(54, 54, 54);
$gray3: rgb(72, 72, 72);
$gray4: rgb(90, 90, 90);
$gray5: rgb(108, 108, 108);
$gray6: rgb(126, 126, 126);
$gray7: rgb(144, 144, 144);
$gray8: rgb(162, 162, 162);
$gray9: rgb(180, 180, 180);
$gray10: rgb(198, 198, 198);
$gray11: rgb(216, 216, 216);
$gray12: rgb(234, 234, 234);

$grays: $gray0, $gray1, $gray2, $gray3, $gray4, $gray5, $gray6, $gray7, $gray8, $gray9, $gray10, $gray11, $gray12;

工作循环示例

@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; }
...

Answer 1

这里的问题是您正在尝试使用变量名作为字符串。即使有可能（不是这样），在您当前的代码中，您最终也会得到类似.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和嵌套列表的问题

1 个答案: