最稳方案是用@mixin respond-to($name)封装断点并用map管理值；$breakpoints必须为带引号键名和带单位值的map，@content须被@media包裹且调用时带大括号，统一用min-width升序定义断点。
直接用 @mixin respond-to($name) 封装断点 + map 管理值，是最稳、最易协作的方案；硬写 @media (min-width: 768px) 看似快，改一次断点就得全局搜替换，漏一处就错乱。
断点必须存进 $breakpoints map，不能用变量或 list
SCSS 的 map-get($breakpoints, $name) 只认 map 类型。传 list（比如 (576px, 768px)）会返回 null，调用 @include respond-to("md") 直接失效。
-
$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px);—— 键名语义清晰，IDE 支持跳转 - 别写
$sm: 576px; $md: 768px;—— 没法按名查值，协作时没人知道$md对应哪一层 - 键名必须加引号：
"sm"✅，sm❌（Sass 认为这是未定义变量） - 值必须带单位：
576px✅，576❌（报Invalid null operation）
@content 必须被 @media 包裹，且调用时要带大括号
漏掉 @content 或没包严，生成的 CSS 会非法：比如 .card@media 这种语法错误，或者样式块裸奔没大括号。
- 正确结构：
@media (min-width: map-get($breakpoints, $name)) { @content; } - 调用必须带大括号：
@include respond-to("md") { color: red; }✅ - 不能写成：
@include respond-to("md"); color: red;❌（@content为空） - 嵌套调用要小心：
@include respond-to("sm") { @include hover-state { ... } }—— 若hover-state内部也依赖@content，外层媒体查询结构可能丢失
只用 min-width，别混 max-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查询——它和min-width混用极易触发重叠或遗漏 - 断点顺序必须升序：
sm → md → lg → xl，否则map-get()查不到或逻辑颠倒
最常被忽略的是 @content 的作用域隔离：它无法访问调用处的局部变量，也不是函数返回值；还有断点变更时，配套的容器宽度、栅格列数等变量必须同步更新，否则视觉和布局会脱节。
