list.nth仅支持纯SCSS列表索引访问，不解析CSS规则、map或嵌套结构；正确用法是传入扁平列表如(100, 200, 500)，索引从1开始，负数倒序取值，越界返回null。
list.nth 不能直接提取“CSS配置项”，它只处理纯列表值
很多人以为 list.nth 能像 JS 的 array[index] 那样从一组样式规则里取值，其实不是。SCSS 的 list.nth 只接收一个 list（比如 (red, blue, green)）和一个整数索引，返回对应位置的**单个值**——它不理解属性名、不解析声明块、也不支持嵌套 map 或混合样式对象。
如果你实际想做的是“按索引读取预设的颜色/间距/断点等配置”，那必须先确保这些配置本身是标准 SCSS 列表（()），而不是 map、function 返回值或 CSS 规则块。
- ✅ 正确输入：
$colors: (primary, secondary, success); list.nth($colors, 1)→primary - ❌ 错误输入：
list.nth((color: red, font-size: 14px), 1)—— 这不是合法列表，编译直接报错Invalid CSS after "(": expected expression - ⚠️ 常见混淆：把
map-get($breakpoints, 'md')和list.nth混用，两者数据结构完全不同
如何安全构造可被 list.nth 消费的配置列表
真正能用 list.nth 的，是你自己定义的扁平化列表。典型场景是断点宽度、z-index 层级、字体大小阶梯等有明确顺序的配置项。
推荐写法是显式声明带语义的变量名，并用 !default 允许覆盖：
立即学习“前端免费学习笔记（深入）”；
$z-index-steps: (
'base', // 0
'modal', // 1
'toast', // 2
'popover' // 3
) !default;
// 使用时：
.modal {
z-index: list.nth($z-index-steps, 2); // → 'modal'（注意：还不是数字）
}
- 索引从 1 开始，不是 0 ——
list.nth($list, 1)是第一个元素 - 如果传入负数，会从末尾倒数：
list.nth($list, -1)取最后一个 - 超出范围会返回
null，不会报错，但后续参与计算可能触发Undefined operation - 若需数值结果（如
z-index: 100），得提前定义为数字列表：$z-values: (0, 100, 200, 500)
list.nth 和 map-get 混用时的常见陷阱
有人试图用 list.nth 去“遍历”一个 map 的 key 或 value，这是行不通的。SCSS 中 map 不是列表，没有顺序保证，也不能用索引访问。
错误示例：
$theme: ( 'bg': #fff, 'text': #333, 'link': #007bff ); // ❌ 编译失败： list.nth($theme, 1) // Error: $list: (bg: #fff, text: #333, link: #007bff) is not a list.
- 想按顺序取 map 值？先用
map-keys($theme)得到 key 列表，再用list.nth取 key，最后map-get查值 - 性能提示：频繁嵌套调用
list.nth(map-keys($m), $i)+map-get会影响编译速度，简单配置建议直接用 map + key 名访问 - 兼容性注意：SCSS 3.3+ 支持
map.values()（返回列表），但旧版本不支持，别依赖它
替代方案：什么时候该放弃 list.nth，改用函数封装
当你的“配置项”开始包含多维信息（比如每个断点同时有宽度、容器最大宽、栅格列数），硬塞进单层列表会让逻辑混乱、难维护。
这时更适合用 map + 自定义函数封装访问逻辑：
$breakpoints: (
'sm': (width: 576px, container: 540px, cols: 12),
'md': (width: 768px, container: 720px, cols: 12),
'lg': (width: 992px, container: 960px, cols: 12)
);
@function breakpoint-get($key, $prop) {
@return map-get(map-get($breakpoints, $key), $prop);
}
// 使用：
.container { max-width: breakpoint-get('md', container); }
- 比
list.nth更易读、更健壮，错误 key 会明确报Null value was passed to breakpoint-get - 避免索引偏移导致整个配置错位（比如删掉中间一项，后面所有
list.nth($list, N)全部失效） - 调试友好：打印
$breakpoints可直观看到结构；而长列表如(576px, 540px, 12, 768px, 720px, 12, ...)几乎无法维护
list.nth 的地方很少，多数是误把 map 当列表，或没意识到索引访问在 SCSS 中的脆弱性。越靠近配置层，越该用语义化 key 访问；只有当你明确需要“第 N 个”且顺序固定不变时，才值得用它。 
