如何在SCSS中遍历嵌套映射生成CSS-css教程-PHP中文网

scss中遍历嵌套map必须用双层@each，首层取键名与子map，次层遍历子map键值；结构需分层清晰、key加引号；&仅作用于直接父选择器，多层嵌套宜拆分以保可维护性。

如何在scss中遍历嵌套映射生成css

SCSS 中遍历嵌套 Map 生成 CSS 是可行的，但必须用 @each 嵌套展开，不能靠 @for 或单层循环“一锤定音”——否则会漏掉深层键值或触发 map-get() 报错。

嵌套 Map 的结构必须清晰分层

常见错误是把方向、尺寸、类型全塞进一个扁平 Map，结果 @each 只能取到第一层 key，深层值取不出来。正确结构应像这样：

$btn-sizes: (
  sm: (padding: 0.25rem 0.5rem, font-size: 0.875rem),
  lg: (padding: 0.75rem 1.5rem, font-size: 1.125rem)
);

注意：每层 value 都是独立 Map，不是字符串或数字；key 统一用带引号字符串（'sm'），避免被当成变量解析失败。

顶层 @each $name, $props in $btn-sizes 拿到 sm 和它的子 Map
再套一层 @each $prop-name, $prop-value in $props 才能逐个写 padding、font-size
如果某项属性可能缺失（比如某些尺寸不设 line-height），务必先用 @if map-has-key($props, 'line-height') 守卫

@each 嵌套时容易忽略选择器作用域

在嵌套循环里写 .btn-#{$name} 是安全的，但若想加状态伪类（如 :hover），不能直接写 &:hover —— 因为外层没有 & 上下文。常见翻车写法：

// ❌ 错误：& 在这里没绑定父选择器
@each $name, $props in $btn-sizes {
  .btn-#{$name} {
    padding: map-get($props, 'padding');
    &:hover { color: red; } // 编译失败：& 无引用目标
  }
}

正确做法是把状态规则提出来，或用显式选择器：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

// ✅ 正确：显式写出完整选择器
@each $name, $props in $btn-sizes {
  .btn-#{$name} {
    padding: map-get($props, 'padding');
  }
  .btn-#{$name}:hover {
    color: red;
  }
}

& 只在嵌套规则内部有效，且只绑定最近的父级选择器
跨多层嵌套时，& 不会自动“穿透”到最外层，别指望它能回溯到 .btn
若需复用基础样式（如 cursor、transition），仍建议抽成 @mixin btn-base 单独调用

map-get() 取值失败的三个高频原因

编译报错 Argument '$map' of map-get() must be a map 或返回 null，90% 出在现场 Map 结构不对或 key 匹配失败。

Map 定义时用了无引号 key：sm: (padding: ...) → 应写成 'sm': (...)，否则 SCSS 会尝试解析 sm 为变量
取值时 key 大小写/连字符不一致：map-get($props, 'fontSize') 查不到 'font-size'
嵌套太深却没逐层 map-get：map-get($props, 'padding') 成功，但 map-get(map-get($props, 'padding'), 'top') 失败——因为 padding 值是字符串 0.25rem 0.5rem，不是 Map