map-get() 返回 null 的主因是 key 不匹配或 map 结构无效；需用 @debug 检查结构，统一用双引号 key，嵌套时分层调用，并始终用 map-has-key() 守卫校验。
map-get() 返回 null 的常见原因
不是变量没定义，而是 key 对不上或 map 结构本身无效。map-get() 只做精确匹配：引号类型、大小写、嵌套层级差一点，就返回 null。编译时不会报错，但生成的 CSS 里会出现 color: null; 这类非法声明，浏览器静默忽略，样式就“消失”了。
检查 map 结构和 key 是否匹配
先用 @debug 打印原始 map，确认结构是否如你所想：
@debug $button-variants;
常见不匹配点：
-
map-get($props, font-size)失败？因为 key 实际是"font-size"（带引号字符串），而你写了无引号的font-size（被 Sass 当作变量名） -
map-get($theme, spacing)返回null？可能真实 key 是"spacing"或spacing，但 map 里存的是'spacing'（单引号）——Sass 中单双引号字符串不互通 - 嵌套 map 没拆开：比如
$theme: ("spacing": ("2": 0.5rem))，你要取"2"，得两层map-get：map-get(map-get($theme, "spacing"), "2")，不能一步写成map-get($theme, "spacing.2")
安全取值必须加守卫判断
别让 map-get() 直接进属性声明，它崩不了整个编译，但会让样式不可控。每次取值前都加一层校验：
@if map-has-key($props, "bg") {
background-color: map-get($props, "bg");
}
更稳妥的做法是组合判断：
@if map-has-key($props, "bg") and map-get($props, "bg") != null- 对颜色类值，再加
meta.type-of(map-get($props, "bg")) == "color"防止传入字符串 - 避免在循环里裸用
nth($list, 2)替代map-get()—— 列表索引越界会直接中断编译，比null更难调试
定义 map 时的硬性规范
所有 key 必须统一用双引号字符串，value 类型要明确：
- 写
"primary": (#007bff, #fff)，不写primary: ()（无引号会被当变量） - 嵌套 map 写
"primary": ("bg": #007bff, "text": #fff)，不用 list 混装，否则map-get()无法识别 - 别在 map 里塞未定义变量：
"gap": $undefined-var会导致整个 map 在某些 Sass 版本中解析失败 - 初始化空 map 用
()，不是null或""，否则map-has-key((), "x")返回false但后续map-get()仍可能出问题
最易被忽略的是：map-get() 的行为完全静态，它不感知运行时、不推导语义、不 fallback。你给它一个错 key，它就安静地还你 null —— 而这个 null 往往藏在嵌套循环深处，直到你在 DevTools 里反复点开十几层规则才看到那条失效的声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
