必须用 $breakpoints map 而非变量或 list，因 map-get 仅支持 map 类型，list 传入返回 null；键名用 "sm"/"md" 等语义化短名，值须带单位如 576px，避免编译错误。
直接用 @mixin respond-to($breakpoint) 配合 $breakpoints map 是唯一能兼顾可维护性与语义清晰的方案；硬编码 @media (min-width: 768px) 看似快，改一次断点就要全项目搜替换，漏一处就导致布局错乱。
为什么必须用 map 而不是变量或 list
map-get($breakpoints, $breakpoint) 只接受 map 类型，传入 list（如 (576px, 768px)）会返回 null，@include respond-to("md") 直接失效；单个变量（如 $md: 768px）无法按名查值、IDE 不支持跳转、协作时语义不清。
-
$breakpoints必须定义为键值对：("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px) - 键名推荐
"sm"/"md"，不写"mobile"或"tablet"——设备绑定词随硬件演进会过时 - 值必须带单位：
576px，写成576会触发Invalid null operation编译错误
@content 调用时最容易失效的三个地方
@content 是内容块注入机制，不是函数返回值，对调用语法极其敏感。
- 必须用大括号包裹：
@include respond-to("sm") { color: red; }✅；@include respond-to("sm"); color: red;❌（后者@content为空） - 不能嵌套另一个含
@content的 mixin：@include respond-to("sm") { @include hover-state { ... } }会导致外层媒体查询结构丢失 -
@content块内无法访问调用作用域的局部变量——这是 SCSS 作用域隔离规则，不是 bug
只用 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)，而非在 mixin 内部拼max-width - 断点变更时，容器宽度等配套变量必须与
$breakpoints同名键同步更新，否则响应式逻辑断裂
最常被忽略的是断点单位与基础字号的联动——如果项目需支持 iOS Safari 视口缩放，优先用 em 单位，但必须确保根元素 font-size 未被重置，否则 48em 实际像素会漂移。
