直接写@media (min-width: 768px)是维护灾难，因断点值散落各处，改一个像素需全局搜索替换，漏改即导致错位；可维护方案是数值、查询逻辑、样式注入三者分离，用语义化map定义断点，mixin封装查询，@content注入样式。
为什么直接写 @media (min-width: 768px) 是维护灾难
改一个像素值，就要全局搜索替换，漏一处就导致某组件在 iPad 横屏下错位。更麻烦的是不同文件里写的“中屏”可能是 768px、767px 或 800px，断点逻辑彻底失控。真正可维护的做法，是把数值、查询逻辑、样式注入三者拆开——$breakpoints 管数值，@mixin respond-to 管查询，@content 管样式。
@mixin respond-to($breakpoint) 必须用 map + 字符串键调用
不能用变量名或 list，否则 map-get() 返回 null，编译直接失败或静默失效。
- ✅ 正确定义：
$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px); - ✅ 正确调用：
@include respond-to("md") { color: red; } - ❌ 错误调用：
@include respond-to(md)（没引号，SCSS 当未定义变量） - ❌ 错误定义：
$breakpoints: (576px, 768px)（list 类型，map-get不认）
值必须带单位：576px 有效，576 会报 Invalid null operation。
@content 不是返回值，是块注入，调用语法极其敏感
它不执行作用域继承，也不拼字符串——它是原样把大括号里的内容，嵌入到生成的 @media 块内部。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须带大括号：
@include respond-to("sm") { padding: 1rem; } - ❌ 不能省略：
@include respond-to("sm"); padding: 1rem;→@content为空，啥都不生成 - ❌ 不能嵌套另一个含
@content的 mixin：@include respond-to("sm") { @include hover-state { ... } }→ 外层媒体查询结构丢失 - ❌ 不能访问调用处局部变量：
$color: blue; @include respond-to("sm") { color: $color; }→ 编译报错，$color不在@content作用域内
只用 min-width，别混 max-width，否则断点会打架
桌面端样式写在默认层（无媒体查询），移动端靠 @include respond-to("sm") 往上叠加。这样所有断点按升序排列，后声明的规则自然覆盖前序。
- ✅ 清晰向上覆盖：
@include respond-to("sm")→@include respond-to("md")→@include respond-to("lg") - ❌ 混用风险：
@media (max-width: 767px)和@media (max-width: 1023px)同时存在，768–1023px 区间两个都匹配，浏览器取后者，但你本意可能是让这个区间单独生效 - ❌ 别在 mixin 内部写
max-width查询——它和min-width混用极易触发重叠或遗漏
真正容易被忽略的是：断点值必须来自真实布局断裂点，不是设计稿标称值。打开 DevTools 拖动窗口，记下导航开始折行、图片失比例的那个宽度，再定 $breakpoints ——否则再完美的 mixin 也救不了错位的卡片。
