SASS 列表不起作用

Question

我正在尝试使 SASS 列表正常工作，但它给了我问题。你们中的任何人都可以指导我做错了什么并给出解决方案吗？

$colors: #02ce53, #05d297, #10cbc2, #e45042, #fe7e10, #01a2f0 
@each $color in $colors
    p
        color: $color

我生成的 CSS 如下所示：

p {
  color: #02ce53; }

p {
  color: #05d297; }

p {
  color: #10cbc2; }

p {
  color: #e45042; }

p {
  color: #fe7e10; }

p {
  color: #01a2f0; }

我实际上希望每个 p 标签具有基于 SASS 列表中提到的颜色序列的颜色。我怎样才能拥有它？

Answer 1

您可以在@each 指令中使用index($list,$value) 获取列表的索引并将其用作nth-child 索引：

$colors: #02ce53, #05d297, #10cbc2, #e45042, #fe7e10, #01a2f0

@each $color in $colors
  p:nth-child(#{index($colors, $color)})
    color: $color

这将为您提供以下信息：

p:nth-child(1) {
  color: #02ce53;
}

p:nth-child(2) {
  color: #05d297;
}

p:nth-child(3) {
  color: #10cbc2;
}

p:nth-child(4) {
  color: #e45042;
}

p:nth-child(5) {
  color: #fe7e10;
}

p:nth-child(6) {
  color: #01a2f0;
}