Css sass@each循环具有多个列表

在scss中开发

我有两个变量列表：

$ids: 21, 33, 73;
$colors: #fff, #000, #333;

以及下面的@each循环

@each $id, $color in ($ids, $colors) {
    .category--#{$id},
    .post--#{$id} {
       color: #{$color};
    }
}

我想显示以下内容

.category--21,
.post--21 {
    color: #fff
}

.category--33,
.post--33 {
    color: #000
}

.category--73,
.post--73 {
    color: #333
}

但是我得到了这个

.category--21,
.post--21 {
    color: 33;
}

.category--#fff,
.post--#fff {
    color: #000;
}

不确定我的结构。显然，我有更长的变量列表（为了演示的目的，每个变量只增加了3个）

---

欢迎任何有建设性的反馈。谢谢

根据我的理解，我认为

@each

不是您的正确选择，因为您没有将密钥和值对作为一个项目。下面是：（重点是我的）

@each指令还可以使用多个变量，如@each$var1，$var2。。。在里面如果是列表列表，子列表的每个元素都被分配给相应的变量

从上面的语句可以看出，在您的情况下，

$id

将被视为一个列表，

$colors

将被视为另一个列表。意思是

• 第一次迭代

  $id

  为

  21

  ，

  $color

  为

  33

  和

  73

  未分配
• 第二次迭代

  $id

  为

  #fff

  ，

  $color

  为

  #000

  ，未分配

  #333

---

您最好使用

@for

循环，如下面的代码片段所示：

$ids: 21, 33, 73;
$colors: #fff, #000, #333;

@for $i from 1 through length($ids) {
  $id: nth($ids, $i);
  $color: nth($colors, $i);
    .category--#{$id},
    .post--#{$id} {
       color: #{$color};
    }
}

---

您好，您误用了它：D@each是一个列表一个列表地迭代，见下文

$pair: (21, #fff), (33, #000), (73, #333);

@each $id, $color in $pair {
    .category-#{$id},
    .post-#{$id} {
       color: #{$color};
       height: 20px;
    }
}

---

文档参考：

Nice，这在开发中非常有效，我的ID可能比颜色少。太好了，谢谢+1@twxia：非常感谢你的更正。我把它换错了：）谢谢你提醒我。。新消息是我做错了什么。不过，我还是选择了@Harry解决方案，因为它与我的开发过程配合得很好。再次感谢+1.