map-get 总返回 null 或报错的主因是键名类型不匹配：定义时用无引号标识符（如 primary）则调用时不可加引号，反之亦然；同时需注意 kebab-case 与 camelCase 不互通、嵌套 map 需逐层调用、避免混用命名风格。
map-get 为什么总返回 null 或报错
直接用 map-get 却拿不到值，最常见的原因是键名类型不匹配：Sass 中 map-get($map, key) 的 key 必须和 map 定义时的键完全一致——包括是否带引号。比如 (primary: #007bff) 里的 primary 是无引号标识符，而 map-get($theme, "primary") 就会失败；反过来，如果定义是 ("primary": #007bff)，却用 map-get($theme, primary)，同样取不到。
- 检查 map 定义时键是否加了引号，调用时保持一致
- 避免在 map 键中混用 kebab-case 和 camelCase，Sass 不自动转换，
main-color≠mainColor - 嵌套 map 需要逐层
map-get，不能一次传多个键，如map-get(map-get($theme, colors), primary)，不是map-get($theme, colors primary)
主题 map 的合理分层结构怎么设
把所有颜色、间距、字体塞进一个扁平 map 容易混乱，也难维护。推荐至少两级：顶层按语义分组（colors、spacing、typography），每组再存具体值。这样既支持局部覆盖（比如只换色板），又方便生成 CSS 自定义属性。
- 顶层 map 命名为
$theme，不要用$colors这类窄口径名，否则后续加断点或动效配置就尴尬 - 颜色组内区分语义键（
primary、success）而非物理值（blue-500），便于主题切换时复用逻辑 - 避免在 map 中存复杂表达式，如
font-size: calc(1rem + 0.25vw)—— Sass map 只存静态值，计算留到 CSS 层或 mixin 里
$theme: (
colors: (
primary: #007bff,
success: #28a745,
),
spacing: (
sm: 0.5rem,
md: 1rem,
)
);
map-get 在 @each 和函数中怎么安全使用
在 @each 遍历 map 时，value 是解构出来的值，但如果你需要根据动态键名查另一层 map，必须确保键存在。Sass 没有原生 has-key，得靠 map-has-key 配合默认值兜底。
- 别直接
map-get($colors, $name)，先用if(map-has-key($colors, $name), map-get($colors, $name), null) - 封装成函数更稳妥，比如
@function theme-color($key) { @return map-get(map-get($theme, colors), $key); }，但注意函数内不能用@warn查 undefined 键，会编译失败 - 当键名来自变量且可能为空时（如
$variant: null），map-get会静默返回null，建议在关键路径上加@if not $val { @error "Missing theme color: #{$key}" }
和 CSS 自定义属性联动时 map-get 的陷阱
想把 Sass map 同步输出为 :root 变量？别直接 map-get 后插进 #{}，Sass 会把颜色转成压缩格式（#007b），而 CSS 变量需要标准十六进制或函数式写法。
- 对颜色值，用
inspect()强制保留原始格式，如--primary: #{inspect(map-get(map-get($theme, colors), primary))}; - 数字单位（如
1.5rem）用"" +转字符串可保单位，--spacing-md: #{"" + map-get(map-get($theme, spacing), md)}; - 嵌套 map 无法直接转成 CSS 变量，CSS 不支持对象结构，只能展平或用 JSON-like 字符串（不推荐）
map-get 本身很简单，但主题系统真正难的是键名约定、缺失值处理和跨层引用的一致性——这些地方一松懈，改一个颜色就得 grep 全项目找硬编码。
