用 @mixin respond-to + @content + 显式升序断点映射，禁用 max-width；因混用 min/max-width 会导致断点缝隙或重叠，Dart Sass 无法自动对齐边界，仅升序 min-width 可推演、可测试。
直接结论：用 @mixin respond-to + @content + 显式断点映射，别写 max-width，所有断点必须升序排列（sm → md → lg → xl）。
为什么不能用 max-width 混合宏？
混合 min-width 和 max-width 会制造“断点缝隙”或“样式重叠”——比如 @include respond-to("md") 返回 @media (max-width: 767px)，而下一个 sm 断点又用 min-width: 576px，中间 576–767px 区间可能被两个规则同时命中，也可能被漏掉。Dart Sass 编译时无法自动对齐边界值，只能靠人工维护。升序 min-width 是唯一可推演、可测试的方案。
怎样定义断点映射并确保升序？
把断点声明为 map，键名按语义排序，值必须是带单位的长度（如 576px），且严格递增：
@use "sass:map"; $breakpoints: ( "sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px );
这个 map 不只是配置，它会被 @mixin 直接消费。注意：!default 要加在变量声明末尾（如果用于库），但调用方修改后必须重新编译，热更新不生效。
立即学习“前端免费学习笔记（深入）”；
@mixin respond-to 必须带 @content
没有 @content 的断点 mixin 只能返回字符串，你得手动拼 #{...}，既难 debug 又无法嵌套伪类或嵌套选择器。正确写法是：
@mixin respond-to($breakpoint) {
$width: map.get($breakpoints, $breakpoint);
@if $width != null {
@media (min-width: $width) {
@content;
}
} @else {
@warn "Unknown breakpoint: #{$breakpoint}";
}
}
- 调用时传入字符串字面量，如
@include respond-to("lg") { font-size: 1.25rem; } -
map.get()比map-has-key()+map-get()更安全，避免未定义 key 导致编译失败 - 不支持动态计算断点（如
$breakpoint + 1px），Sass 无法在编译期 resolve 变量名字符串
桌面优先写法下，移动端覆盖怎么组织？
默认层写桌面样式，移动端只覆盖必要部分。错误做法是每个断点都写全量样式；正确结构是：
.card {
padding: 1.5rem;
// 桌面默认样式
@include respond-to("sm") {
padding: 1rem;
}
@include respond-to("md") {
padding: 0.75rem;
}
}
关键点：
- 不要在
sm里重写所有属性，只覆盖变化项 - 断点调用顺序必须和
$breakpoints顺序一致（升序），否则生成的 CSS 媒体查询会乱序，影响层叠逻辑 - 如果你需要“仅在某区间生效”，得手写组合查询，比如
@media (min-width: 768px) and (max-width: 991.98px)—— 这种需求应封装为新 mixin，不塞进respond-to
最容易被忽略的是：断点 map 的键名（"sm"）和实际像素值之间没有强制绑定，团队协作时必须同步文档，否则 @include respond-to("sm") 在不同项目里可能对应完全不同宽度。
