SCSS/SASS如何通过索引而非键名获取嵌套Map中的值？

嘿，我完全懂你的需求——不想依赖固定的键名（比如xl）来获取嵌套Map里的第一个项，毕竟用户可能会修改这些键名，用索引来取确实更灵活！

首先得说清楚：Sass的Map本质是键值对集合，但从Sass 3.3版本开始，它会保留键的插入顺序，这就给我们通过索引取值提供了可能。不过Sass没有直接通过索引获取Map项的原生函数，我们可以组合几个内置函数来实现：

具体步骤和代码示例 #

先看你的原始Map：

$breakpoints : (
  xl: (
    page-width: 1170px,
    gutter: 30px,
    base-font-size: 17px
  ),
  l: (
    breakpoint: 1170px,
    page-width: 980px,
    gutter: 20px,
    base-font-size: 17px
  )
);

1. 基础实现方式

我们可以先提取Map的所有键，再通过索引拿到第一个键，最后用这个键获取对应的嵌套Map：

// 提取所有断点的键，得到按插入顺序排列的列表：("xl", "l")
$breakpoint-keys: map-keys($breakpoints);
// 取列表的第一个元素（Sass列表索引从1开始，不是0！）
$first-breakpoint-key: nth($breakpoint-keys, 1);
// 获取第一个嵌套Map
$first-breakpoint: map-get($breakpoints, $first-breakpoint-key);

// 现在就能轻松获取里面的变量了
$target-page-width: map-get($first-breakpoint, page-width); // 输出1170px
$target-gutter: map-get($first-breakpoint, gutter); // 输出30px

2. 封装成复用函数（更推荐）

如果需要多次使用这个逻辑，把它封装成函数会更方便，还能加错误处理：

@function get-nth-breakpoint($map, $index: 1) {
  $keys: map-keys($map);
  // 检查索引是否超出范围，避免报错
  @if $index > length($keys) {
    @error "索引 #{$index} 超出了Map的键数量（总共 #{length($keys)} 个）";
  }
  $target-key: nth($keys, $index);
  @return map-get($map, $target-key);
}

// 使用示例
$first-breakpoint: get-nth-breakpoint($breakpoints);
$first-page-width: map-get($first-breakpoint, page-width); // 1170px

注意事项 #

• Sass的列表索引是1-based（从1开始），和很多编程语言的0-based不一样，别搞混了！
• 这个方法依赖Map的插入顺序，只要用户修改Map时保持第一个项是你需要的目标，就能正确取值，完全不用关心键名改成啥样。

内容的提问来源于stack exchange，提问作者The Sloth