map-get() 查无键时静默返回 null，导致 css 声明为空（如 color: ;）而被浏览器忽略；多层嵌套需逐层 map-has-key 校验，键名严格区分大小写与空格，合并用 map-merge 会静默覆盖原键。
map-get() 返回 null 时 CSS 声明直接消失
这不是浏览器渲染问题，而是 Sass 编译器在遇到 map-get($map, $key) 查不到键时，返回 null，最终生成的 CSS 里那行声明就空了。比如 color: map-get($colors, 'accent'); 中 'accent' 不存在，输出结果就是 color: ;——浏览器忽略该属性，样式彻底丢失。
- 查不到键不会报错，也不会 fallback，
map-get()安静地返回null - 若该值用于
background-image或border等复合属性，整条规则可能被降级为部分生效（如只保留宽度、丢掉颜色） - 必须主动防御：用
if(map-has-key($map, $key), ..., null)或默认值兜底，例如color: if(map-has-key($colors, 'accent'), map-get($colors, 'accent'), #6b7280);
映射嵌套过深导致链式 map-get 失败
写 map-get(map-get($themes, 'dark'), 'text') 看似合理，但只要中间任意一层是 null（比如 $themes 里压根没定义 'dark'），外层 map-get 就会报 Invalid null value for map-get() 编译中断——整个文件 CSS 都不生成。
- 不要裸写多层
map-get，先用map-has-key检查每一层 - 更稳妥的做法是封装成函数：
@function theme-color($mode: 'light', $prop: 'text') { @if map-has-key($themes, $mode) { $mode-map: map-get($themes, $mode); @if map-has-key($mode-map, $prop) { @return map-get($mode-map, $prop); } } @return #374151; // fallback } - 注意：Sass 不支持
??或可选链，必须显式判断
映射键名拼写或大小写不一致引发静默失效
写 map-get($breakpoints, 'SM') 或 map-get($breakpoints, 'sm ')（末尾空格）都不会报错，但返回 null。Sass 的键匹配严格区分大小写和空白字符，且不 trim。
- 定义映射时统一用小写+短横线，如
(sm: 576px, md: 768px)，避免驼峰或下划线 - 取值前先
@debug map-keys($breakpoints)确认实际键名（编译日志里能看到真实列表） - 禁止从 JS 对象或 JSON 动态注入映射键名——Sass 编译期无法校验，只能靠人工对齐
使用 map-merge 合并映射时覆盖原键却无提示
$colors: map-merge($colors, (primary: #3b82f6)); 看起来是“追加”，但如果 $colors 里已有 primary 键，它会被新值完全覆盖，且无任何警告。若合并逻辑写错顺序，旧值就丢了。
- 合并前先
@debug map-get($colors, 'primary')确认原始值，避免意外覆盖 - 需要保留原键？改用
map-deep-merge（需自定义函数）或手动遍历map-keys判断是否存在 - 禁止在多个文件中反复
map-merge同一个变量——Sass 不维护状态，每次都是独立计算，容易漏掉某次合并
map-get() 返回 null 既不中断编译也不报错，你得盯着生成的 CSS 文件逐行比对，或者打开 DevTools 的 Computed 面板看某条属性是否干脆没出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
