必须用 map 显式命名字段替代 list，因 list 无键名、靠索引取值，增删元素会导致 nth() 全错位；多层背景、渐变停点、断点与主题色等场景须用 map-get() 安全取值，并以 join($list, comma) 拼接后加 ... 展开。
直接用 list 存多层背景、z-index 顺序或渐变色停点，十有八九会编译错乱或运行时失效；必须改用 map 显式命名字段，并配合 map-get() 和 join(, comma) 安全拼接——因为 Sass 的 list 没键名、靠索引取值，一增一删就全偏。
为什么 nth($list, 2) 在多层背景里不可靠
常见错误是写 $layers: (url(a.png), top, cover, no-repeat, url(b.png), center, contain, repeat) 这种扁平 list，再用 nth($layers, 1) 取图、nth($layers, 2) 取位置……结果第二层图片不显示，或 background-repeat 消失。根本原因是：
- 每层背景至少含 4 个语义强关联属性（图、位置、尺寸、重复），但
list不记录字段意图，只认索引 - 一旦某层加了
background-origin，后续所有nth()调用全错位 -
list不支持嵌套结构校验，Sass 编译器不会报错，只默默输出无效 CSS
map-get() 比 nth() 更安全的三个使用场景
真正该用 map 的地方，不是“能用”，而是“必须用”：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
多层背景：每层定义为
(img: url(...), pos: center, size: cover, repeat: no-repeat)，用map-get($layer, img)取值，字段名即文档 -
渐变色停点：用
(#ff6b6b: 0%, #4ecdc4: 30%, #44b5b1: 75%)，避免硬编码等距公式，支持任意百分比分布 -
断点与主题色：如
$breakpoints: (sm: 576px, md: 768px)或$themes: (light: (bg: #fff, text: #333))，深层访问必须链式调用map-get(map-get($themes, light), bg)
join($list, comma) 是唯一安全的多值拼接方式
很多人想循环写多个 background-image: linear-gradient(...)，结果只保留最后一行——CSS 层叠规则决定的。正确做法是把所有参数拼成一个列表，再用展开语法传入：
立即学习“前端免费学习笔记（深入）”；
- 必须用
join($acc, $new-item, comma)，不能用空格连接，否则linear-gradient(to right, #f00 0%, #00f 100%)会被当做一个字符串值 - 拼完后要写成
linear-gradient(to right, $stops...)（注意末尾...），缺了它 Sass 会报Invalid CSS after "to right,": expected expression - 对
background-position等多值属性，值数量必须严格对齐图层数量，三层背景就得提供三个位置值，顺序不能颠倒
最易被忽略的是：Sass 的 map 和 list 都是编译期静态结构，不支持运行时操作；map-get() 查不到键时返回 null，但不会报错，最终生成的 CSS 可能缺失关键声明，得靠检查编译后文件才能发现。
