应使用 map 存储断点变量并严格升序排列，@content 必须被 @media 包裹，移动端优先需用 up/down/between 三类精准对齐边界，媒体查询应置于组件外避免嵌套错误。
直接用 @mixin 封装断点 + @content 注入样式，比硬写 @media 更安全、可维护性高得多；但参数设计错、@content 没包严、断点语义混乱，反而会让 CSS 输出错乱或体积暴增。
怎么定义断点变量才不踩坑
断点必须用 map 存，不能散落在各个 @media 里：$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px);
常见错误是把像素值直接塞进 Mixin 参数，比如 @mixin respond-to(768px)——改一次断点就得全局搜数字。
断点顺序必须升序排列（sm → md → lg → xl），否则 map.get() 查不到或逻辑颠倒。
别用 px 以外的单位（如 em）做键值，Sass map 键匹配是严格字面量比对，"md" 和 md（无引号）不等价。
为什么 @content 必须被 @media 包裹
没包裹的 Mixin 只能返回字符串，调用时得手动拼样式块，极易出错：
✘ 错误写法：@mixin respond-to($name) { @if map.has-key($breakpoints, $name) { @media (min-width: map.get($breakpoints, $name)) { } } } —— 缺 @content，啥也插不进去。
✔ 正确写法：@mixin respond-to($name) { @if map.has-key($breakpoints, $name) { @media (min-width: map.get($breakpoints, $name)) { @content; } } }
漏掉这层包裹，&__title 这类嵌套选择器会失效，编译后变成 .card@media... 这种非法语法，或者生成无大括号的裸规则。@content 不是可选语法糖，是让调用方自由传入任意样式块的唯一机制。
移动端优先下，up/down/between 怎么写才不重叠
三类必须共存，且边界值严格对齐：media-breakpoint-up("md") → @media (min-width: 768px)media-breakpoint-down("md") → @media (max-width: 767.98px)（注意 .98，避免 768px 被两个条件同时捕获）media-breakpoint-between("md", "xl") → @media (min-width: 768px) and (max-width: 1199.98px)
别用 max-width 模拟 up，像素边界冲突是高频 Bug；测试时重点缩放浏览器到 767px / 768px / 769px，看样式是否精准切换。between 的上限要减 0.02px，不是减 1px——某些浏览器对整数边界渲染不稳定。
编译后 CSS 体积暴增？多半是嵌套错了位置
媒体查询是「条件」，不是「结构」，别把它塞进组件选择器内部：
✘ 错误：.nav { @include respond-to("lg") { &__item { ... } } } → 可能生成 .nav@media... 非法语法，或冗余高权重选择器。
✔ 正确：在组件级调用，.nav { ... } @include respond-to("lg") { .nav__item { ... } }
栅格系统里更典型：别在 @for 外套 @each $breakpoint，否则 12 列 × 5 断点 = 60 条规则；应按断点分组，每个 @media 内只循环当前断点真正需要覆盖的列数。
复杂点在于：@content 看似简单，但它依赖调用上下文；一旦 Mixin 被多层嵌套调用，& 的解析可能意外丢失父级作用域——这种问题只在编译后 CSS 里暴露，调试成本高。
