应统一断点单位并用函数封装校验：定义 $breakpoints map 时全用 px 或 em，键名加引号；用 @function breakpoint($name) 校验存在性并返回值；@each 循环生成工具类需同时声明 $name, $width；命名按语义如 for-desktop-up；区间断点用 991.98px 避开像素四舍五入问题。
为什么直接写 @media (min-width: 768px) 很快就失控
断点散落在十几个 SCSS 文件里，有人写 767px，有人写 768px，改一个值要全局搜索替换，漏掉两处还不容易发现。更麻烦的是，@media 里混着像素、em、rem，单位不统一导致 map-get() 返回值参与计算时报错，比如 min-width: map-get($breakpoints, "md") + 1px 遇到 48em 就炸。
- 所有断点单位必须一致：全用
px或全用em，别混用 - 键名必须加引号：
"md"，不能写md（会被当变量） -
map-get($breakpoints, "xxx")查不到时返回null，@media (min-width: null)编译后变成无效规则，浏览器静默忽略，调试时根本看不出问题
用 $breakpoints Map + @function breakpoint() 安全取值
定义统一的断点映射，再封装一层函数做校验，比裸用 map-get() 多一层兜底。
@function breakpoint($name) {
@if not map-has-key($breakpoints, $name) {
@error "Unknown breakpoint: #{$name}. Available: #{map-keys($breakpoints)}";
}
@return map-get($breakpoints, $name);
}
- 调用必须带引号：
breakpoint("lg")，不是breakpoint(lg) - 函数返回的是纯数值（如
992px），可直接用于@media，Sass 编译期就能求值 - 如果项目要用
em单位，定义时就写"lg": 62em，别在函数里硬转——单位是设计决策，不是逻辑层该处理的事
生成 .d-sm-none 这类工具类时，@each 要写对参数
想批量产出响应式显示/隐藏类，@each 必须同时声明 $name, $width，漏掉 $width 会导致循环体里 $name 实际是整个键值对，编译报错 Invalid null operation。
@each $name, $width in $breakpoints {
.d-#{$name}-block { display: block !important; }
.d-#{$name}-none { display: none !important; }
}
- 类名拼接只能用
#{$name}，不能用map-keys($breakpoints)—— Sass 不允许在选择器中展开列表 - 需要
max-width类（如.d-sm-down）得另起一个循环，或用嵌套 Map：("sm": (min: 0, max: 575px)) -
!important是必要的：避免被组件内联样式或第三方 CSS 覆盖
别用 @mixin breakpoint() 动态生成所有断点场景
语义模糊是最大隐患。@include for-sm 到底指「≥sm」还是「仅 sm 区间」？新人看不懂，后期加新设备尺寸时逻辑更难对齐。
- 优先按意图命名：
@mixin for-desktop-up、@mixin for-tablet-only - 区间断点用
991.98px而非992px，避开整数像素四舍五入导致的媒体查询空隙或重叠 - 如果真要用 Map 动态生成 mixin，key 名必须和 mixin 名严格对应，比如
for-sm-up只能查"sm-up"，且必须提前约定好后缀含义
最易被忽略的一点：display: none 类只是表层控制，真正影响布局的是 visibility、opacity、height 和 overflow 的组合。生成工具类时，别只盯着 display，得根据实际渲染需求决定要不要加 visibility: hidden 或 position: absolute 等配套规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
