map-get 不能直接读取深层嵌套值，因其仅支持单层键名查找，如 "colors.primary" 被视为字符串键而非路径；正确方式为链式调用或封装带类型校验的 deep-get 函数。
map-get 不能直接读取深层嵌套值，必须逐层调用或封装函数，否则会返回 null 导致编译失败或样式丢失。
为什么 map-get($config, "colors.primary") 总是返回 null
因为 map-get() 只接受两个参数：一个已定义的 Map 变量和一个**单层键名**。写 "colors.primary" 是把它当做一个完整字符串键去查，而你的 Map 里根本没有这个顶层键。
常见错误现象包括：
• 编译报错 “Invalid CSS after … expected '{'”
• 样式意外不生效（null 被静默忽略，但某些属性如 width 会直接崩）
• DevTools 里看到属性值为空或非法（如 width: null）
正确做法只有两种：
• 手动链式： map-get(map-get($config, "colors"), "primary")
• 封装函数： deep-get($config, "colors", "primary")
嵌套访问时最容易踩的三个类型坑
键名类型不一致是最隐蔽的崩溃源：
• 定义用 (primary: #007bff)（无引号标识符），调用就得用 primary，不能写 "primary"
• 定义用 ("main-color": #007bff)（带连字符的字符串），调用就必须加双引号：map-get($colors, "main-color")
• 单引号 'sm' 在部分 Sass 版本中不被识别，统一用双引号更稳妥
中间某层不是 Map 也会炸：
• map-get($config, "colors") 返回 #fff（颜色值）而非 Map？下一层 map-get(..., "light") 就报错：Argument '$map' of map-get() must be a map
• 防御写法：@if type-of($val) != 'map' { @error "Expected map, got #{$val}"; }
怎么封装一个真正可用的 deep-get 函数
别抄网上没守卫的“一行递归”，实际项目里它会在半夜三点编译失败：
• 必须校验每层返回值是否为 Map
• 必须处理空路径、键不存在、中间 null 等情况
• 推荐返回默认值而非硬报错，便于组件降级
一个最小可靠实现：
@function deep-get($map, $keys...) {<br> @each $key in $keys {<br> @if type-of($map) != 'map' {<br> @return null;<br> }<br> $map: map-get($map, $key);<br> @if $map == null {<br> @return null;<br> }<br> }<br> @return $map;<br>}调用示例：
color: deep-get($theme, "colors", "light", "text");注意：
$keys... 表示可变参数，不是数组，传参时直接列出来，不要包括号
什么时候该放弃 map-get，改用其他方案
不是所有配置都适合塞进 Map：
• 如果键名需要动态拼接（比如 $mode + '-text'），map-get 无法支持——Sass 不允许变量插值作键名
• 如果结构超过三层（如 themes > light > components > button > border），链式调用和调试成本远高于收益，建议扁平化重构
• 如果涉及运行时切换（如 JS 控制主题），Sass Map 编译后就固化了，此时应改用 CSS 自定义属性：z-index: var(--z-modal)，再由 JS 动态设置
最常被忽略的一点：Map 里的单位混用（px 和 rem 混存）会导致后续计算报 unit mismatch。初始化时就统一单位，比后期加 unit() 判断更省心
立即学习“前端免费学习笔记（深入）”；
