Sass 的 Map 和 List 是编译期静态结构，不支持运行时操作，仅能通过内置函数如 map-get()、list.nth() 等配合 @each/@for 使用；键名不可动态拼接，嵌套访问需链式调用，深层结构建议封装函数并用 map-has-key() 防御性检查。
Map 和 List 在 Sass 中根本不是 JavaScript 那套东西
它们是编译期静态结构，不支持运行时增删、遍历回调或嵌套解构。你不能用 map.get() 或 list.push() —— Sass 没这语法，写了直接报错 Undefined operation 或 Function does not exist。
真正能用的只有内置函数：map-get()、map-has-key()、map-keys()、map-values()、list.nth()、list.length() 等。所有操作都得靠函数组合 + 循环（@each / @for）完成。
- Map 必须用括号包裹键值对：
(key1: value1, key2: value2)，写成{key1: value1}会解析失败 - List 默认是空格分隔，逗号分隔需显式加括号：
(a, b, c)是三元素 list，a b c也是，但1px 2px和(1px, 2px)在函数参数中行为可能不同 - 嵌套 Map/List 时，
map-get()只取一层，想深层读取得链式调用：map-get(map-get($theme, colors), primary)
用 Map 管理主题色和断点时，别硬套 JS 对象思维
Sass 的 Map 不支持动态键名拼接（比如 map-get($colors, $prefix + '-text')），变量插值在 map 键位置会被当作字面量处理，结果是查不到。
典型场景：多主题切换、响应式断点配置。正确做法是提前定义完整键集，用 @each 批量生成 CSS 规则，而不是试图“动态查”。
立即学习“前端免费学习笔记（深入）”；
- 断点 Map 推荐写法：
$breakpoints: (sm: 576px, md: 768px, lg: 992px);，配合@mixin media-breakpoint-up($name)内部用map-get($breakpoints, $name) - 主题色 Map 若含层级，如
(light: (bg: #fff, text: #333), dark: (bg: #111, text: #eee))，访问map-get(map-get($themes, light), bg)是安全的；但map-get($themes, $mode)中$mode必须是已知字符串变量，不能来自属性值或 data-* 属性 - 避免把 Map 当配置中心传入多个 mixin —— 每次
map-get()都是独立计算，无缓存；高频访问建议先解构到局部变量：$colors: map-get($theme, colors); $primary: map-get($colors, primary);
List 处理字体栈、阴影值时，注意空格与逗号的隐式转换
写 $fonts: 'Helvetica', 'Arial', sans-serif; 实际得到的是三元素 list；但写 $fonts: 'Helvetica' 'Arial' sans-serif; 也是三元素 list —— Sass 会自动把空格分隔转为 list。可这在 font-family 输出时没问题，换到 box-shadow 就容易翻车。
比如 $shadows: 0 2px 4px rgba(0,0,0,0.1) 0 4px 8px rgba(0,0,0,0.15); 看似一串，其实是 10 元素 list（每个值单独一项），不是两个阴影声明。
- 要表达多个 box-shadow，必须用嵌套 list：
$shadows: (0 2px 4px rgba(0,0,0,0.1)), (0 4px 8px rgba(0,0,0,0.15));，再用@each $s in $shadows输出 -
list.nth($list, 1)下标从 1 开始，不是 0；越界不报错，返回null，可能导致生成无效 CSS（如color: null） - 用
join()合并 list 时，第三个参数$separator控制连接符：join($list1, $list2, space)生成空格连接，join($list1, $list2, comma)生成逗号连接 —— 这是控制font-family和transform多函数的关键
Map/List 嵌套过深时，编译错误信息极其不友好
当写错 map-get() 层级，比如查一个不存在的键，Sass 返回 null；如果后续又对 null 调用 map-get()，会报 Argument `$map` of `map-get($map, $key)` must be a map —— 但错误定位不到原始出错行，而是卡在下一层函数调用。
这不是 bug，是设计使然：Sass 编译器不追踪值来源，只校验当前函数入参类型。
- 调试技巧：在关键路径插入
@debug map-keys($var);或@debug type-of($var);，确认结构是否符合预期 - 防御性写法：用
map-has-key()判断再取值，比裸用map-get()更稳妥；尤其在 theme override 场景下，用户可能漏配某层 key - 超过两层嵌套（如
map-get(map-get(map-get($config, a), b), c)）建议封装成工具函数，哪怕只做一次封装，也能集中处理nullfallback
最麻烦的从来不是语法记不住，而是编译报错不告诉你哪一层塌了。写完嵌套结构，先 @debug 出来瞄一眼键名和类型，省掉半小时瞎猜。
