SASS：通过嵌套列表循环“…；不是'map get'&引用；

我尝试在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

？

这个错误应该是对正在发生的事情的绝对泄露。Sass将您的映射解释为一个列表。之所以发生这种情况，是因为您使用的是循环列表的语法，而不是映射。如果仅通过

@each

从映射中提取一个值，Sass将其强制转换为列表

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

---

对于正在发生的事情，这个错误应该是一个致命的泄露。Sass将您的映射解释为一个列表。之所以发生这种情况，是因为您使用的是循环列表的语法，而不是映射。如果仅通过

@each

从映射中提取一个值，Sass将其强制转换为列表

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

---

谢谢，成功了！我不知道这种语法是可能的，但它当然有意义。谢谢，它成功了！我不知道这种语法是可能的，但它当然是有意义的。