用 Sass 变量统一管理语义化断点（如 $breakpoint-tablet: 768px）、封装 @mixin above/between 媒体查询宏、配合 map 与 breakpoint-get 函数实现灵活调用，并添加设计依据注释，显著提升响应式代码可维护性。
把断点写死在每个媒体查询里，确实容易失控——改一个尺寸，到处找、反复替、漏掉几处还看不出问题。用 Sass 变量统一管理断点，是真正能降低维护成本的解法。
定义语义化断点变量
别用 sm、md 这类模糊缩写，优先按设备场景或内容需求命名，比如：
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
$breakpoint-wide: 1440px;
这样别人（包括未来的你）一眼就懂这个断点对应什么上下文，而不是猜缩写含义。
封装响应式混合宏（mixin）
把媒体查询逻辑收进一个 mixin，避免重复写 @media (min-width: ...)：
@mixin above($breakpoint) { @media (min-width: $breakpoint) { @content; } }@mixin between($min, $max) { @media (min-width: $min) and (max-width: $max - 1px) { @content; } }
使用时直接写 @include above($breakpoint-desktop) { ... }，语义清晰，修改断点值只需动变量，所有调用自动生效。
立即学习“前端免费学习笔记（深入）”；
配合 map 管理多级断点与命名映射
如果项目断点较多，可用 Sass map 组织：
$breakpoints: ("mobile": 0, "tablet": 768px, "desktop": 1024px, "wide": 1440px);- 再配一个
breakpoint-get("desktop")函数，按名取值，灵活又安全。 - 还能扩展生成工具类（如
.d-none@tablet），一套源数据驱动多处输出。
加个注释说明设计依据
在变量定义旁加一行简短注释，比如：
// 基于主流平板最小宽度，兼顾竖屏 iPad 和部分安卓平板
比“断点2”“旧版断点”这类注释有用得多——它让断点不再只是数字，而是有上下文的设计决策。
