最稳方案是@mixin respond-to($breakpoint)配合$breakpoints map；常见错误包括调用未加{}、map值缺单位、传变量而非字符串键名、混用min/max-width导致区间重叠，且@content内无法访问局部变量。
直接用 @mixin respond-to($breakpoint) + $breakpoints map 是最稳、最易维护的方案；硬编码 @media (min-width: 768px) 看似快，改一次断点就要全局搜替换，漏一处就导致布局错乱。
为什么 @include respond-to("md") 没生成任何 CSS？
常见错误是调用时没写大括号包裹样式块，或 $breakpoints 定义不合法：
-
@include respond-to("md") { color: red; }✅ 正确：有@content注入点 -
@include respond-to("md"); color: red;❌ 错误：@content为空，无输出 -
$breakpoints: (sm: 576, md: 768);❌ 错误：值缺单位，编译报Invalid null operation -
$breakpoints: (576px, 768px);❌ 错误：不是 map，map-get()返回null -
@include respond-to(md) { ... }❌ 错误：传的是未定义变量，不是字符串键名
@mixin mq() 必须支持 min / max / between 三模式
单参数 @mixin respond-to() 在真实项目中很快撞墙。你需要明确表达“从某点开始”“到某点为止”“在两点之间”：
-
@include mq(sm)→@media (min-width: 576px) -
@include mq(max: md)→@media (max-width: 767px)（注意是-1px，避免边界冲突） -
@include mq(sm, lg)→@media (min-width: 576px) and (max-width: 1199px)
关键细节：between 模式必须用 max-width: $value - 1px，否则相邻断点会同时生效；$breakpoints 里不要写单位（如 sm: 576），让 mixin 统一加 px 或转 em，避免混用。
别在 @mixin 内部写 max-width 查询
混用 min-width 和 max-width 极易触发重叠或遗漏：
- 写
@media (max-width: 767px)和@media (max-width: 1023px)，会导致 768–1023px 区间两个都匹配，浏览器取后者 - 若真要限定区间，应写
@media (min-width: 768px) and (max-width: 1023px)，反而更啰嗦 - 统一用
min-width向上覆盖，边界清晰、逻辑可控；桌面端样式写在默认层，移动端覆盖全交给@include respond-to("sm")往上叠加 - 所有断点按升序排列：
sm → md → lg → xl，CSS 后声明的规则自然覆盖前序
真正容易被忽略的是作用域隔离：@content 块内无法访问调用点的局部变量，这不是 bug，是 SCSS 的设计约束；还有 @at-root (with: media) 在旧版 Node Sass 中不支持，必须升级到 Dart Sass 才能确保嵌套媒体查询正确挂载到根级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
