应使用 Sass Map（如$breakpoints: ("sm": 576px, "md": 768px)）统一管理响应式断点，通过map-get()安全取值、封装breakpoint()函数校验键存在性，并用@each遍历生成工具类，避免硬编码、字符串拼接和单位混用。
怎么用 Sass Map 存响应式断点
直接用 $breakpoints 这个 Map 变量存断点值，别写一堆独立变量。Sass 里 Map 是唯一能自然表达“名字→数值”映射的数据结构，比 $sm: 576px、$md: 768px 这种零散定义更易维护、可遍历、能传参。
常见错误是把断点写死在媒体查询里，比如 @media (min-width: 768px)，后续改数值要全局搜；或者用字符串拼接键名（"sm"），结果调用时拼错大小写或漏引号，Sass 报 Map key not found 却不提示哪行出错。
- 推荐初始化方式：
$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px); - 键名统一用小写加引号，避免
sm（未加引号）被误解析为变量 - 所有断点单位保持一致（全用
px或全用rem），混用会导致map-get()返回值参与计算时报单位冲突
如何安全地从 Map 里取断点值
必须用 map-get($breakpoints, "md")，不能写 $breakpoints("md") 或 $breakpoints.md —— Sass 没有这种语法，会直接报错 Invalid CSS after "$breakpoints": expected "{", was "("。
容易忽略的是：map-get() 查不到键时返回 null，而 null 参与媒体查询会编译成空条件，导致样式丢失且无警告。比如键写成 "mdo"，@media (min-width: map-get($breakpoints, "mdo")) 编译后变成 @media (min-width: )，浏览器直接忽略整条规则。
立即学习“前端免费学习笔记（深入）”；
- 加一层保护：封装成函数
@function breakpoint($key) { @return map-get($breakpoints, $key); } - 调试时临时加
@if not map-has-key($breakpoints, $key) { @error "Unknown breakpoint: #{$key}"; } - 调用时始终带引号：
breakpoint("lg")，不写breakpoint(lg)（会被当变量）
怎样用 Map 批量生成媒体查询工具类
靠 @each 遍历 $breakpoints，比手动写四段 @media 更可靠。但注意：Sass 的 @each 遍历 Map 是 (key, value) 对，不是单值，漏写 value 会导致循环体里 $key 实际是整个键值对，报 Invalid null operation。
性能上无影响，但生成的 CSS 类名必须可控。比如想生成 .d-sm-block，就不能用 #{map-keys($breakpoints)} 动态拼类名——Sass 不允许在选择器中展开列表，会报 Invalid CSS。
- 正确写法：
@each $name, $width in $breakpoints { .d-#{$name}-block { display: block !important; } } - 如果需要 min/max 双向断点，拆成两个循环，或用嵌套 Map：
("sm": (min: 576px, max: 767px)) - 避免在循环里调用复杂函数，Sass 编译时无法优化，大量断点 + 多层嵌套会拖慢构建
为什么 Map 不能直接传给 JavaScript
Sass 编译完就没了，$breakpoints 不会自动变成 JS 的 const breakpoints = { sm: '576px' }。有人试过用 json-stringify() 或自定义函数输出 JSON，但那只是生成一段字符串文本，不是运行时数据，JS 拿不到。
真正要 JS 读取断点，只有两个办法：把断点值硬编码进 HTML data- 属性，或用构建工具（如 Webpack）把 Sass 变量抽成 JSON 文件再 import。别指望 @debug $breakpoints 能帮到前端运行时。
最容易被忽略的点：CSS-in-JS 库（比如 Emotion）的 css 函数不认 Sass Map，传 breakpoint("md") 过去只会得到未编译的字符串 map-get($breakpoints, "md")，最终 CSS 无效。
