直接写@media (min-width: 768px)是维护灾难，因需全局搜索替换、易漏改致布局错位；必须用$breakpoints map（如("sm": 40em, "md": 48em)）配合@mixin respond-to，禁用变量或list，统一min-width向上覆盖，@content须大括号包裹，键名语义化、值带单位、优先em。
为什么直接写 @media (min-width: 768px) 是维护灾难
改一个断点要全局搜索替换，漏一处就导致 iPad 上按钮错位；多人协作时，@media (max-width: 767px) 和 @media (max-width: 1023px) 边界重叠，浏览器取后声明的规则，但你本意是让 768–1023px 区间单独生效——这种问题不是写错了，而是结构没封住。
@mixin respond-to($name) 必须搭配 $breakpoints map 使用
SCSS 的 map-get() 只认 map 类型。写 $sm: 40em 或 (576px, 768px) 这类变量或 list，调用 @include respond-to("sm") 会返回 null，编译直接报 Invalid null operation。
- 必须声明为键值对：
$breakpoints: ("sm": 40em, "md": 48em, "lg": 64em, "xl": 80em); - 键名用
"sm"不用"mobile"：语义稳定，不绑定设备 - 值必须带单位：
40em，不能写40；优先选em（适配缩放和动态根字号） - IDE 能跳转到定义处，协作时一眼看清每个断点对应哪一层
@content 的调用语法极其敏感，错一个字符就不生效
@content 不是函数返回值，是样式块注入机制，只响应大括号包裹的完整内容块。
- ✅ 正确：
@include respond-to("sm") { color: red; } - ❌ 错误：
@include respond-to("sm"); color: red;（分号终结，@content为空） - ❌ 嵌套失效：
@include respond-to("sm") { @include hover-state { } }（若hover-state内部也用@content，外层媒体查询结构丢失） -
@content块内无法访问调用作用域的局部变量——这是 SCSS 作用域隔离规则，不是 bug
别混用 min-width 和 max-width，真要区间就用 between 模式
统一用 min-width 向上覆盖，边界清晰、逻辑可控。混用 max-width 极易触发重叠或空隙——比如 @media (max-width: 767px) 和 @media (max-width: 1023px)，768–1023px 区间两个都匹配。
立即学习“前端免费学习笔记（深入）”；
- 桌面端样式写在默认层（无媒体查询），移动端覆盖全交给
@include respond-to("sm")往上叠加 - 如果真要限定区间，用支持三模式的
@mixin mq()：@include mq(sm, lg)→@media (min-width: 40em) and (max-width: 63.98em) -
between模式必须用max-width: $value - 1px（或-0.02em），否则相邻断点会同时生效 - 所有断点按升序排列：
sm → md → lg → xl，$breakpoints里不要写单位（如sm: 576），让 mixin 统一加px或转em
实际项目里最常被忽略的，不是怎么写 mixin，而是断点值变了之后，容器宽度、栅格列宽、字体响应比例这些配套变量没同步更新——它们得和 $breakpoints 在同一张 map 里管理，否则视觉错位根本查不到源头。
