map-merge() 仅浅合并，相同 key 时后者覆盖前者，嵌套 Map 不递归；需深度合并须自写递归函数；遍历应始终用 @each $key, $value in $map，避免依赖 map-keys() 顺序；函数内不可输出 CSS，须由 mixin 处理。
用 map-merge() 合并 Map 但注意浅合并特性
直接调用 map-merge($map1, $map2) 是最常用方式，但它只做一层合并：如果两个 Map 里有相同 key，$map2 的值会覆盖 $map1，嵌套的 Map 不会递归合并。比如：
@debug map-merge(("sm": 320px, "md": 768px), ("md": 769px, "lg": 1024px));<br>// 输出: ("sm": 320px, "md": 769px, "lg": 1024px)
如果你需要深度合并（例如两个 Map 都含 "breakpoints" 子 Map），得自己写递归函数，Sass 原生不提供 deep-map-merge。
用 @each + map-get() 动态生成媒体查询规则
合并后的 Map 只是数据，要转成 CSS，得遍历它生成 @media 块。常见错误是把 Map key 当作纯字符串拼接，而没考虑单位或逻辑关系：
- 键名如
"sm"本身无意义，必须对应到具体断点值（map-get($breakpoints, "sm")） - 别直接写
@media (min-width: #{$key})——$key是字符串，不是数值 - 推荐用
min-width而非max-width，避免重叠和维护混乱
示例：
$breakpoints: map-merge(("sm": 320px, "md": 768px), ("lg": 1024px));<br><br>@each $name, $width in $breakpoints {<br> @media (min-width: $width) {<br> .#{$name}-only { display: block; }<br> }<br>}
避免 map-keys() 和 map-values() 混用导致顺序错乱
Sass Map 的键值对无固有顺序，map-keys($map) 返回的列表顺序不保证与定义一致。你不能假设 nth(map-keys($map), 1) 一定对应第一个断点。实际中应：
- 始终用
@each $key, $value in $map遍历，这是唯一可靠方式 - 若需固定顺序（如 sm → md → lg），把键名存在单独有序列表里：
$order: "sm" "md" "lg";，再用@each配合map-get() - 不要依赖
map-keys()结果来推导断点层级关系
在 @function 中返回 Map 并用于条件判断时注意作用域
如果封装合并逻辑为函数，比如 get-responsive-map($base, $override)，要注意返回的 Map 是新副本，原 Map 不受影响。但更关键的是：函数内不能直接输出 CSS，只能返回值；媒体查询必须在顶层或 mixin 中生成。
典型误用：
@function merge-and-output($a, $b) {<br> $merged: map-merge($a, $b);<br> @each $k, $v in $merged {<br> @media (min-width: $v) { ... } // ❌ 编译报错：函数内不允许嵌套 CSS 规则<br> }<br> @return $merged;<br>}
正确做法是拆成两步：函数只负责合并，mixin 负责输出：
@function responsive-merge($base, $override) {<br> @return map-merge($base, $override);<br>}<br><br>@mixin generate-media($map) {<br> @each $name, $width in $map {<br> @media (min-width: $width) { @content; }<br> }<br>}
真正容易被忽略的是 Map 的不可变性 —— 每次 map-merge() 都创建新对象，旧引用不会自动更新；还有媒体查询嵌套层级过深时，Sass 编译可能静默截断，建议单个 Map 键数控制在 10 以内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
