$breakpoints必须是map类型，因为SCSS的map-get()函数仅支持map参数；若用list或变量，会导致查值为null、媒体查询失效、IDE无法跳转、协作混乱及主题导出失败。
必须用 $breakpoints Map 定义断点，不能用变量或 list；否则 map-get() 查不到值，@include respond-to("md") 直接编译失败。
为什么 $breakpoints 必须是 map 类型
SCSS 的 map-get($breakpoints, $breakpoint) 函数只接受 map 类型参数。传入 list（比如 (576px, 768px)）会返回 null，导致 @include respond-to("sm") 生成空媒体查询；传入单个变量（比如 $sm: 576px）则无法通过键名查值，@mixin 逻辑直接断裂。
常见错误现象：npm run build 不报错但生成的 CSS 里没有对应断点的媒体查询块，页面在目标宽度下样式完全不生效。
- IDE 无法跳转到断点定义处（list 和单变量无语义键名）
- 协作时没人知道
$md是指导航折叠点还是卡片换行点 - 主题切换或导出给 JS 时，没法统一遍历键值对
$breakpoints 的键名和值怎么写才不出错
键名必须小写、无连字符、语义化（如 "sm" ✅，"x-large" ❌），值必须带单位且为像素（576px ✅，48em ❌），除非你全项目根字号严格锁定且测试过所有设备。
立即学习“前端免费学习笔记（深入）”；
移动端优先要求只用 min-width，所以 map 里只存临界宽度，不写条件：
$breakpoints: ( "xs": 0, "sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px );
- 顺序必须从小到大：CSS 媒体查询按 map 键顺序输出，影响层叠优先级
- 不要混入
max-width表达式（如"palm": "(max-width: 480px)"）——那是媒体查询字符串，不是断点值 - 避免用设备词命名（
"tablet"、"ipad"），改用功能状态（"nav-collapse"）更稳定
如何用 @mixin respond-to($breakpoint) 正确调用
这个 mixin 是断点逻辑的唯一出口，内部必须用 map-get() 取值，并包裹 @content 块。漏掉大括号或写错语法，会导致样式不注入。
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
} @else {
@warn "Unknown breakpoint: #{$breakpoint}.";
}
}
-
@content必须用大括号包裹，不能省略——否则 Sass 编译器不识别内容注入 - 必须加
map-has-key()判断，否则传入不存在的键（如"2xl"）会静默失败 - 调用时键名要加引号：
@include respond-to("md")，不加引号会被当作变量名解析
配套的容器宽度也要同步更新
断点 map 不是孤立的。如果你还定义了 $container-max-widths，它的键必须和 $breakpoints 完全一致，否则 .container 在 md 断点下宽度不匹配。
$container-max-widths: ( "sm": 540px, "md": 720px, "lg": 960px, "xl": 1140px );
容易被忽略的一点：断点变更后，不仅改 $breakpoints，还要检查所有依赖它的 map（比如栅格列数、字体缩放比例、阴影强度等），它们的键名和数量必须对齐。少一个键、多一个键，都会让 map-get() 返回 null 或触发警告。
