最稳、最易维护的方案是用@mixin respond-to($breakpoint)配合map定义断点；map支持按键名查值、IDE跳转和语义化管理，而list无法命名查询、单变量难批量维护；必须用min-width向上覆盖，避免max-width导致区间重叠，且断点变更时需同步更新容器宽度等配套map变量。
直接用 @mixin respond-to($breakpoint) + map 定义断点，是最稳、最易维护的方案；硬编码 @media (min-width: 768px) 是后期改断点时最耗时间的坑。
为什么必须用 map 而不是变量或 list
$breakpoints 必须是 map 类型，否则 map-get($breakpoints, $breakpoint) 会返回 null 或编译报错。list（如 (576px, 768px)）没法按名字查值，@include respond-to("md") 直接失效；单个变量（如 $md: 768px）无法批量管理、IDE 不支持跳转、协作时语义不清。
正确写法：
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}
- 键名推荐用
"sm"/"md"/"lg"，和主流框架对齐，别用"tablet"这类设备绑定词 - 值必须带单位：
576px，写成576会报Invalid null operation - 调用时传字符串：
@include respond-to("md") { ... }，不是@include respond-to(md)
@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
统一用 min-width 向上覆盖，边界清晰、逻辑可控。混用 max-width 容易导致区间重叠：
- 写
@media (max-width: 767px)和@media (max-width: 1023px)，768–1023px 区间两个都匹配，浏览器取后者，但你可能只想让这个区间单独生效 - 若真要限定区间，应写
@media (min-width: 768px) and (max-width: 1023px)，反而更啰嗦 - 桌面端样式写在默认层（无媒体查询），移动端覆盖全靠
@include respond-to("sm")往上叠加 - 别在
@mixin内部写反向断点（如max-width），它和min-width混用极易触发重叠或遗漏
断点变更时，容器宽度等配套变量必须同步更新
断点变了，但 .container 最大宽度没同步更新，页面就会在某个宽度下突然撑破或留白异常。这不是媒体查询的问题，而是布局系统没对齐。
- 例如把
"lg"从992px改成1024px，那$container-max-widths里的"lg"也得同步改 - 容器宽度变量也建议用
map管理，和断点map同名键对齐，比如：$container-max-widths: ("sm": 540px, "md": 720px, "lg": 960px) - CSS 变量（
var(--sm)）不能出现在@media条件中，浏览器直接忽略整条规则——这是纯 CSS 硬限制，SCSS 编译阶段已展开，但 JS 注入或 PostCSS 替换流程必须确保提前替换到位
