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

您可以使用index($list,$value)指令中的@each获取列表的索引，并将其用作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;
}