SASS：通过嵌套列表循环“...不是`map-get'的映射”

Question

我尝试在SASS中循环浏览地图，但它没有按预期工作。

给出以下列表：

$names: (
  peter: (
    color: #f00,
    height: 20px,
    name: first
  ),
  susan: (
    color: #0f0,
    height: 40px,
    name: second
  )
);

我想循环遍历它并创建一个像这样的CSS输出：

.first {
  color: #0f0,
  height: 40px,
}

.second {
  color: #0f0,
  height: 40px,
}

为此，我尝试创建一个循环遍历地图并将其值输出到CSS的mixin：

@mixin classes($map) {
  @each $key in $map {
    .#{map-get(map-get($key, $map), name)} {
      // Rules
    }
  }
}

@include classes($names);

不幸的是循环没有运行，它会退出并显示以下错误消息：

$map: ("peter" (color: #f00, height: 20px, name: first)) is not a map for `map-get'

我做错了什么，是否无法将呼叫嵌套到map-get？

Answer 1

对于发生的事情，错误应该是一个死的赠品。 Sass将您的映射解释为列表。发生这种情况是因为您使用语法循环列表，而不是映射。如果您只通过@each从映射中提取单个值，则Sass会将其转换为列表。

@mixin classes($map) {
  @each $key, $val in $map {
    .#{map-get($val, name)} {
      // Rules
    }
  }
}