sass 的 map-get 不支持点语法路径如 "colors.primary"，必须逐层调用 map-get(map-get($theme, colors), primary)；键名类型需严格一致，嵌套结构需手动展开，推荐封装 theme() 函数统一处理并校验存在性。
map-get 不能直接取 colors.primary 这种路径
Sass 原生 map-get 只接受两个参数：map 和一个**单层 key**，不支持字符串路径（如 "colors.primary"）或点语法。写 map-get($theme, "colors.primary") 会直接报错或返回 null，因为 Sass 找不到这个顶层键。
常见错误现象：编译失败提示 Invalid CSS after "...": expected "{", was "}"，或样式意外丢失（值为 null 后被忽略）。
- 必须手动逐层调用：
map-get(map-get($theme, colors), primary) - 如果键名含连字符（如
main-color），定义和调用都得加引号：("main-color": #007bff)→map-get($colors, "main-color") - 键名类型必须严格一致：定义用
primary（无引号标识符），调用就不能写"primary"
嵌套 map 的 key 必须逐级匹配，不能跳层
比如 $theme 定义为：(colors: (primary: #007bff, text: #333), spacing: (sm: 0.5rem))，那么 map-get($theme, primary) 永远是 null —— 因为 primary 不在 $theme 顶层，而在 colors 下面。
使用场景多见于主题切换、组件库配置等需要分组管理的场合。一旦结构变深（比如 colors: (light: (primary: ...), dark: (...))），裸写 map-get 就容易漏掉某一层。
- 正确链式写法：
map-get(map-get(map-get($theme, colors), light), primary) - 别试图用空格拼多个 key：
map-get($theme, colors primary)语法非法 - 避免在 mixin 外直接多层嵌套调用，可读性差且难调试
封装 theme() 函数比裸调 map-get 更安全
裸写 map-get 容易拼错 key、漏判空值、没处理不存在的键，编译时报错但不指明哪一层断了。封装函数能统一兜底逻辑，也便于后续扩展路径解析（如支持 "colors.primary" 字符串）。
一个最小可用示例：
@function theme($key) {
$colors: map-get($theme, colors);
@if not map-has-key($colors, $key) {
@error "Theme color '#{$key}' not found in $colors map";
}
@return map-get($colors, $key);
}
调用：color: theme(primary); —— 简洁、可校验、报错带上下文。
- 函数内必须用
map-has-key()判断存在性，map-get遇到不存在 key 仅返回null，不会中断编译 - 若需支持多级路径（如
theme("light.primary")），得配合str-split()+ 递归，但多数项目两级足够 - 不要在函数里用
@warn输出undefined值，Sass 编译器会直接报错
导出 CSS 自定义属性时，嵌套结构要 flatten 或显式展开
想把 $theme 映射成 :root 里的 --color-primary，不能靠一次 @each 自动遍历深层嵌套。Sass 的 @each 只解一层，value 是子 map 本身，不是最终颜色值。
典型做法是分层生成：
@each $group-name, $group-map in $theme {
@if type-of($group-map) == 'map' {
@each $key, $val in $group-map {
--#{$group-name}-#{$key}: #{$val};
}
}
}
这样输出 --colors-primary、--spacing-sm 等，前端 JS 也能按约定读取。
- 如果嵌套超过两层（如
colors: (light: (primary: ...))），必须手动展开，Sass 没有原生深度遍历 - 注意单位一致性：
spacing里混用rem和px会导致 CSS 变量无效 - 导出前建议加
@if not $val { @error "Missing value for #{$group-name}.#{$key}" }防止空值注入
$theme 结构随业务变复杂后，没人记得清 map-get(map-get(...)) 里到底嵌了几层、哪一层该用引号、哪个 key 是 camelCase 哪个又是 kebab-case —— 这时候函数封装和严格命名约定，比技巧更重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
