必须用 $breakpoints map：因 map-get() 仅支持 map 类型，list/变量传入返回 null；键名可查、值带单位、支持 map-has-key() 守卫，便于统一管理、批量遍历和 ide 跳转。
必须用 $breakpoints map，不能用 list 或单变量；所有断点逻辑都得从这个 map 里读值，否则改一个断点就要满项目搜 768px，漏改就错。
为什么非得用 map 而不是 $sm: 576px 这种变量
SCSS 的 map-get() 函数只认 map 类型，传个 list 或变量进去直接返回 null，@include respond-to("md") 就静默失效。IDE 也无法跳转到定义处，协作时没人知道 $md 是指平板还是小桌面。更关键的是：没法批量遍历——想自动生成 .d-sm-none 这类工具类？没 map 就只能硬写六次 @each。
-
$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px)✅ 键名可查、值带单位、支持map-has-key()守卫 -
$sm: 576px; $md: 768px;❌ 无法统一管理，重构成本高 -
(576px, 768px, 992px)❌ 没键名，@include respond-to(md)根本找不到对应值
@mixin respond-to($breakpoint) 里必须用 min-width 和守卫
用 max-width 容易和相邻断点重叠，比如 @media (max-width: 767px) 和 @media (max-width: 1023px) 同时命中 768–1023px 区间，浏览器取后声明的规则，但你本意可能是“仅在该区间生效”。min-width 天然向上覆盖，顺序清晰。
- 必须加
@if map-has-key($breakpoints, $breakpoint)，否则传错键名（如"mobile"）会编译出@media (min-width: null)，CSS 无效且无提示 - 值必须带单位：
"sm": 576px，不能写"sm": 576，否则报Invalid null operation - 调用时传字符串：
@include respond-to("md")，不是@include respond-to(md)（后者是未定义变量）
断点改了，.container 宽度却没变？那是 $container-max-widths 没同步
断点和容器宽度是两套 map，但语义必须对齐。比如你把 "lg" 从 992px 改成 1024px，但 $container-max-widths 里 "lg": 960px 没动，那页面在 1000px 宽度下就会左右留白——因为 .container 还按旧断点算最大宽度。
- 两个 map 键名必须完全一致：
$breakpoints有"2xl"，$container-max-widths也得有"2xl" - Bootstrap 项目中，
$grid-breakpoints和$container-max-widths必须在@import "bootstrap/scss/functions"前重定义，否则后续变量不会重新计算 - 别依赖自动推导：
$container-max-widths默认只映射到$grid-breakpoints已有键，新增断点后它不会自动加一行
最常被忽略的点：断点 map 本身要声明在全局作用域（如 _variables.scss），且必须早于任何 mixin 或函数被引入；否则 respond-to() 读到的是空 map 或旧值，编译不报错，但媒体查询全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
