sass中需用链式map-get或自定义deep-get函数获取嵌套map深层值，因不支持点语法；键含连字符或空格时须加引号；使用时应校验null并注意作用域与单位一致性。
用 map-get 读取嵌套 Map 的深层值，必须链式调用
直接对多层嵌套的 Map 使用一次 map-get 拿不到深层键值，比如 $theme: (color: (primary: #007bff, text: #333))，map-get($theme, primary) 会返回 null —— 因为 primary 不在顶层，而在 color 下面。
正确做法是逐层 map-get：先取 color 这个子 Map，再从中取 primary。Sass 不支持类似 JavaScript 的 obj.color.primary 点语法，也不内置递归 deep-get 函数（除非你自己写）。
$colors: map-get($theme, color)$primary: map-get($colors, primary)- 或合并成一行：
map-get(map-get($theme, color), primary)
写一个 deep-get 函数避免重复嵌套调用
手动链式调用在配置项变多时极易出错、难维护。推荐封装一个可复用的 deep-get 工具函数，接收 Map 和键路径列表（如 (color, primary)），自动逐层查找。
这个函数要处理路径为空、中间某层不是 Map、键不存在等情况，返回 null 或默认值更安全。示例实现：
@function deep-get($map, $path...) {
@each $key in $path {
@if type-of($map) == 'map' and map-has-key($map, $key) {
$map: map-get($map, $key);
} @else {
@return null;
}
}
@return $map;
}
调用：deep-get($theme, color, primary)，比 map-get(map-get($theme, color), primary) 清晰且容错更强。
Map 键名含连字符或空格时，map-get 仍可用但需加引号
Sass 允许 Map 键为字符串、数字、颜色等任意值，但若你用 "font-size" 或 "breakpoint lg" 这类含空格/连字符的字符串作键，map-get 参数必须保持一致类型 —— 不能漏掉引号。
- 错误：
map-get($config, breakpoint lg)→ Sass 编译报错：Invalid CSS after "...t($config, breakpoint": expected ")", was "lg)" - 正确：
map-get($config, "breakpoint lg")或map-get($config, 'breakpoint lg') - 建议统一用双引号，和 JSON 风格一致，也方便后续导出或对接 JS
深层 Map 配置 + @each 循环生成样式时，注意作用域与变量覆盖
当用 deep-get 从主题 Map 中取值，并配合 @each 批量输出组件样式时，容易忽略变量作用域问题：比如在循环内声明 $value，但外层已有同名变量，导致意外覆盖。
更隐蔽的问题是 Map 值本身为 null 时未校验，直接参与计算（如 lighten($value, 10%)）会触发编译错误："null" is not a color for `lighten`。
- 始终用
@if $value != null判断后再使用 - 在
@each内部用$local-value: deep-get(...)显式命名，避免污染外层变量 - 深层 Map 若用于响应式断点，注意单位一致性 ——
deep-get($breakpoints, md)返回768px还是纯数字768？必须和后续min-width使用方式匹配
深层 Map 看似结构清晰，但每次取值都是一次潜在的运行时失败点；比起“写得漂亮”，优先保证每层 map-has-key 校验和 fallback 处理才真正降低维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
