最稳方案是@mixin mq()配合$breakpoints map；常见错误包括调用缺大括号、map值缺单位或类型错误、传变量非字符串键名、混用min/max-width导致重叠，且@content内无法访问局部变量。

直接用 @mixin mq() 配合 $breakpoints map 是最稳、最易维护的写法；硬编码 @media (min-width: 768px) 看似快，改一次断点就得全局搜索替换，漏一处就导致布局错乱。

为什么 @include respond-to("md") 没生成任何 CSS？

常见错误不是 mixin 写错了，而是调用姿势或数据结构不合法：

• @include respond-to("md") 后没加大括号包裹样式块 → @content 为空，编译后无输出
• $breakpoints 定义成 list（如 (576px, 768px)）或单变量（如 $md: 768px）→ map-get() 返回 null，媒体查询不生成
• $breakpoints 值没带单位（如 sm: 576）→ 编译报 Invalid null operation
• 调用时传的是未定义变量 @include respond-to(md)，不是字符串键名 → 查不到对应值

@mixin mq() 必须支持 min / max / between 三模式

单参数 @mixin respond-to($breakpoint) 在真实项目中很快撞墙。你需要明确表达三种逻辑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• @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: 991px)

关键细节：between 模式必须用 max-width: map-get($breakpoints, $upper) - 1px，否则相邻断点区间会同时命中；$breakpoints 里值不要带单位（如 sm: 576），让 mixin 统一加 px 或转 em，避免混用。

别在 mixin 内部写 max-width 查询

混用 min-width 和 max-width 极易触发重叠或遗漏：

• 写 @media (max-width: 767px) 和 @media (max-width: 1023px)，会导致 768–1023px 区间两个都匹配，浏览器取后者
• 桌面端样式应写在默认层（无媒体查询），移动端覆盖全交给 @include mq(sm) 往上叠加
• 所有断点按升序排列：sm → md → lg → xl，CSS 后声明的规则自然覆盖前序
• @content 块内无法访问调用点的局部变量 —— 这不是 bug，是 SCSS 的作用域隔离设计约束

真正容易被忽略的是：断点变更时，容器宽度等配套变量（如 $container-max-widths）必须同步更新；还有 @at-root (with: media) 在旧版 Node Sass 中不支持，必须升级到 Dart Sass 才能确保嵌套媒体查询正确挂载到根级。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！