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，... in＆lt; list＆gt;。如果＆lt; list＆gt;是一个列表列表， 子列表的每个元素都分配给相应的变量 。

从上面的陈述中可以看出，在您的情况下，$ids将被视为一个列表，$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};
    }
}

Answer 2

嗨，你滥用它：D @each是列表的迭代列表，见下文

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

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

doc reference：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign

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

2 个答案: