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,
}

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

@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
    }
  }
}