如何循环遍历两个 Sass 映射？答案

【问题标题】：How to loop through two Sass maps?如何循环遍历两个 Sass 映射？
【发布时间】：2017-06-07 17:32:28
【问题描述】：

我有两张 sass 地图。

$map-one: (
 name1: value1,
 name2: value2,
 name3: value3,
 name4: value4,
);

$map-two: (
 name5: value5,
 name6: value6,
);

我创建了一个 each 循环来生成一个类，其名称为类名，其值为内容。

@each $name, $value in $map-one {
 .#{$name} {
  content: $value;
 }
}

以上仅适用于一张地图。但我想为map-two 做同样的事情。有没有办法在不创建另一个循环的情况下将其添加到上面的同一个循环中？

类似：

@each $name, $value in $map-one and $name2, $value2 in $map-two {
 .#{$name} {
  content: $value;
 }

 .#{$name2} {
  content: $value2;
 }
}

【问题讨论】：

标签： css sass

【解决方案1】：

如果两个映射具有相同的结构，那么您应该只使用一个映射，但如果您想同时使用两个映射，则使用map-merge() 之类的，

$map-one: (
   name1: value1,
   name2: value2,
   name3: value3,
   name4: value4,
);

$map-two: (
   name5: value5,
   name6: value6,
);

$merged: map-merge($map-one, $map-two);
@each $name, $value in $merged {
   .#{$name} {
       content: $value;
    }
}

【讨论】：