如何在CSS中用Sass Map生成响应式断点

必须用 map 而非变量或 list 定义断点，因 map-get() 仅支持 map 类型，传 list 返回 null，单变量无法按名查值且 IDE 不可跳转；断点值须用 em 单位（如 48em）并严格递增，配合 @mixin respond-to($breakpoint) { @media (min-width: #{map-get($breakpoints, $breakpoint)}) { @content; } } 实现安全、可维护的响应式封装。

为什么不能用变量或列表定义断点

直接写 $sm: 768px 或 $breakpoints: (576px, 768px) 看似省事，但调用 @include respond-to("sm") 时会失败——map-get() 只认 map 类型，传 list 返回 null，传单个变量根本没法按名查值。IDE 也跳不到定义处，协作时没人知道 $md 到底对应哪一层。

必须用键值对 map：$breakpoints: ("sm": 40em, "md": 48em, "lg": 64em)。键名推荐语义化短名（"sm" 而非 "mobile"），值必须带单位（48em，不是 48），否则编译报 Invalid null operation。

怎么写一个可靠的 respond-to mixin

核心就三件事：取值、拼查询、注入样式。别手拼字符串，用 #{map-get($breakpoints, $breakpoint)} 动态插值；只用 min-width，避免和 max-width 混用导致区间重叠或遗漏；必须支持 @content，否则没法嵌套伪类或子选择器。

@mixin respond-to($breakpoint) { @media (min-width: #{map-get($breakpoints, $breakpoint)}) { @content; } }

1. 调用时必须带大括号：@include respond-to("md") { padding: 1.5rem; }
2. 不能在 @content 外部访问调用作用域的局部变量——这是作用域隔离，不是 bug
3. 支持 &:hover、&::before，父选择器层级不会被破坏

em 单位比 px 更可靠的实际影响

纯 px 断点在用户缩放页面或动态修改 html font-size 时会失效。比如设计稿标 768px，按 16px 基准换算就是 48em（768 ÷ 16 = 48）。Sass 不感知运行时根字号变化，但 em 是相对单位，浏览器渲染时自动适配。

如果项目已用 rem 布局，断点仍建议用 em——因为媒体查询中的 em 基于浏览器默认字号（通常 16px），不受 CSS 中 html { font-size: 12px } 影响，反而更稳定。

常见错误："sm": 576（漏单位）、"sm": 576px（缩放失效）、"sm": 36em（没对齐设计基准）。

Bootstrap 里改断点要绕过哪些坑

不能直接改已编译的 CSS，得在 Sass 源码层覆盖 $grid-breakpoints。顺序很关键：必须在 @import "~bootstrap/scss/functions" 之后、@import "~bootstrap/scss/variables" 之前定义你的 map。

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1200px, xxl: 1400px) !default;

1. 缺任意一个键（比如漏掉 xs: 0），Bootstrap 的响应式类（如 .col-md-6）会生成不全
2. 值必须严格递增，否则 @each 循环或内部计算会出错
3. 改完要重启构建，热更新不生效

真正容易被忽略的是：容器宽度（.container）也得同步改 $container-max-widths，只动断点不改容器，布局依然错位。