带有多个列表的 sass @each 循环

Question

在 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 个）。

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

Answer 1

根据我的理解，我认为@each 对您来说不是正确的选择，因为您没有将键和值对作为一个项目。以下是documentation says about @each：（重点是我的）

@each 指令也可以使用多个变量，如 中的@each $var1, $var2, ...。如果 是列表列表，子列表的每个元素都分配给各自的变量。

从上面的语句可以看出，在您的情况下，$ids 将被视为一个列表，$colors 将被视为另一个列表。这意味着

• 第一次迭代 $id 是 21，$color 是 33 和 73 未分配
• 第二次迭代$id 是#fff，$color 是#000 和#333 未分配。

---

使用@for 循环可能会更好，如下面的 sn-p：

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

Answer 2

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

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

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

文档参考：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign