必须用 map 管理断点，因 SCSS 的 map-get 仅支持 map 类型，list 或变量无法按名查值且 IDE 不支持跳转；$breakpoints 需声明为 ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px)，键名统一、值带单位；@content 必须大括号包裹、不可嵌套、须在规则块内调用；统一用 min-width 向上覆盖，避免重叠；配套变量需同名同步更新；@content 不继承局部变量，需显式传参。
直接用 @mixin respond-to($breakpoint) + $breakpoints map 管理断点，是唯一能真正中心化、可维护的方案；硬编码 @media (min-width: 768px) 看似快，改一次断点就要全局搜索替换，漏一处就导致响应式错乱。
为什么必须用 map 而不是变量或 list
SCSS 的 map-get($breakpoints, $breakpoint) 只接受 map 类型；传入 list（如 (576px, 768px)）会返回 null，@include respond-to("md") 直接不产出任何 CSS。单个变量（如 $md: 768px）无法按名查值，IDE 不支持跳转，协作时没人知道 $md 对应哪一层设备。
-
$breakpoints必须声明为 map：$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px); - 键名推荐用
"sm"/"md"，和 Bootstrap/Vue UI 库对齐，别用"mobile"或"tablet"这类设备绑定词 - 值必须带单位：
576px，写成576会触发Invalid null operation编译错误
@content 调用时最容易失效的三个地方
@content 是内容块注入机制，不是函数返回值，语法极其敏感：
- 必须用大括号包裹内容块：
@include respond-to("sm") { color: red; }✅；写成@include respond-to("sm"); color: red;❌（@content为空，不生成任何媒体查询） - 不能在
@content块里再嵌套另一个带@content的@mixin，比如@include respond-to("sm") { @include hover-state { ... } }，外层媒体查询结构会丢失 -
@include必须写在 CSS 规则块内部（即有选择器后的大括号里），不能直接写在顶层或变量声明后，否则不产出任何 CSS
只用 min-width，别混用 max-width
统一用 min-width 向上覆盖，边界清晰、逻辑可控。混用 max-width 容易导致区间重叠：写 @media (max-width: 767px) 和 @media (max-width: 1023px)，768–1023px 区间两个都匹配，浏览器取后者——但你可能只想让这个区间单独生效。
立即学习“前端免费学习笔记（深入）”；
- 桌面端样式写在默认层（无媒体查询），移动端覆盖全靠
@include respond-to("sm")往上叠加 - 若真要限定区间，应写
@media (min-width: 768px) and (max-width: 1023px)，反而更啰嗦，且破坏“向上覆盖”范式 - 断点变更时，容器宽度等配套变量（如
$container-sm、$container-md）必须和$breakpoints同名键同步更新，否则布局错位
最常被忽略的是作用域隔离：@content 块内无法访问调用作用域的局部变量，这不是 bug，是 SCSS 的设计规则；想透传值，得显式作为参数传进 mixin，而不是依赖外部变量。
