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

SASS 列表不工作

SASS List Not Working

each

function

sass

mixins