必须用$breakpoints map而非变量或list，因map-get()仅支持map类型，变量和list会导致@include respond-to("md")返回null；键名语义稳定、值带单位、支持IDE跳转和批量遍历，且min-width+升序em断点确保向上覆盖与缩放响应性。
直接用 @media (min-width: 768px) 写断点，改一次就得全局搜索替换，漏一处就出错；用变量单独存 $md: 768px 看似省事，但 @include respond-to("md") 会报错或返回 null——Sass 的 map-get() 只认 map 类型，不认普通变量。
为什么必须用 $breakpoints map 而不是变量或 list
断点值不是孤立数字，而是带语义、可查、可跳转的命名集合。硬编码或 list 都破坏这个前提：
-
$sm: 576px是变量，map-get($breakpoints, "sm")会失败——因为$breakpoints根本没定义，或者类型不对 -
(576px, 768px)是 list，没法按名字取值：@include respond-to("md")没法知道第二个元素对应什么设备 - IDE 不支持从
@include respond-to("lg")跳转到定义处，协作时没人知道"lg"到底是 992px 还是 1024px - 值必须带单位：
"sm": 576px合法，"sm": 576编译报错Invalid null operation
@mixin respond-to 里只用 min-width 的真实原因
不是为了“习惯”，而是避免区间重叠和逻辑混乱：
- 写
@media (min-width: 768px)天然形成“向上覆盖”：默认样式（移动端）→sm→md→lg，边界清晰 - 混用
max-width会导致区间交叉，比如@media (max-width: 767px)和@media (max-width: 1023px)在 768–1023px 区间同时命中，浏览器取后声明的规则，但你本意可能是让该区间独占生效 - 如果真要写“仅在某区间生效”，应手动加
and (max-width: ...)，但这属于特例，不该作为基础 mixin 的默认行为 - 所有断点值必须升序排列：
"sm": 40em,"md": 48em,"lg": 64em——否则@each循环生成的媒体查询顺序错乱
用 em 单位定义断点的实际影响
不是“更高级”，而是解决缩放与动态根字号下的失效问题：
立即学习“前端免费学习笔记（深入）”；
-
768px在用户把浏览器缩放到 125% 或页面运行时动态修改html { font-size: 20px }时，断点实际触发位置偏移，菜单可能提前折叠或延迟展开 -
48em对应的是“当根字号为 16px 时等于 768px”，但 Sass 不感知运行时变化——所以关键在于：设计稿断点应按内容换行宽度（如 920px）换算成 em，而不是抄设备像素值 - 换算公式：
em = px ÷ base-font-size，若设计稿断点是 920px，基准字号是 16px，则写"nav-collapse": 57.5em（920 ÷ 16） - 别在 mixin 里做单位转换，直接存 em 值；Sass 编译期无法读取 DOM 的
font-size，所谓“响应根字号”是伪命题，真正要做的是用 em 锚定设计意图
@content 不是可选项，是嵌套注入的唯一可靠方式
没有 @content，你就得拼字符串、手动处理选择器层级、放弃伪类和嵌套逻辑：
- 调用必须带大括号：
@include respond-to("md") { padding: 1.5rem; }，省略{}会编译失败 -
@content内部能直接用&:hover、&::before，父选择器层级不丢失，.nav { @include respond-to("md") { &:hover { ... } } }生成的是.nav:hover，不是.nav @media... .nav:hover - 作用域隔离是特性不是 bug：你在
@content外定义的局部变量（如$gap: 1rem），里面访问不到——这是防止意外污染，需显式传参或提升作用域 - 别试图在 mixin 外部写样式再“注入”，
@content必须出现在 mixin 定义体中，且只能出现一次
最易被忽略的一点：断点命名要稳定，别用 "mobile" 或 "tablet"——设备在变，内容不变；"sm" 指“小屏内容密度临界点”，它可能在 iPad 竖屏触发，也可能在折叠屏横屏触发，只要内容开始挤不下，就是它的职责范围。
