如何用Sass生成响应式CSS媒体查询

应使用 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 里暴露，调试成本高。