直接写像素值断点是维护隐患，应统一用 map 管理断点并封装支持 min/max/between 的 @mixin mq()，校验键名、单位和类型，@content 必须大括号包裹且不可嵌套。
为什么直接写 @media (min-width: 768px) 是后期维护的定时炸弹
改一个断点要全局搜索替换，@media (min-width: 768px) 出现在 _header.scss、_card.scss、_form.scss 里，漏改一处，iPad 上表单控件就错位；更隐蔽的是，不同组件用的临界值不一致——_nav.scss 用 768px，_sidebar.scss 却写 767px，结果横屏时导航收起但侧边栏还撑开着。根本问题不是写法错，而是像素值散落在各处，失去统一控制点。
@mixin mq() 必须支持 min、max、between 三种模式
单参数 @include mq(sm) 只能应付最简单场景。真实项目中你会频繁遇到这三类需求：
-
@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 模式必须用
map-get($breakpoints, $upper) - 1px，否则相邻断点区间会重叠 - mixin 开头必须加校验：
@if not map.has-key($breakpoints, $breakpoint) { @error "Unknown breakpoint '#{$breakpoint}'"; } - 所有断点值必须带单位（如
sm: 576px），写成sm: 576会报Invalid null operation
$breakpoints 必须是 map，不能是 list 或单变量
map-get($breakpoints, sm) 只接受 map 类型。用 list（如 (576px, 768px)）会导致 @include mq("md") 直接失效；用单变量（如 $md: 768px）则无法按名查值、IDE 不支持跳转、协作时语义模糊。
正确写法：
$breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px );
- 键名用
sm/md，不写tablet或bp-768——设备尺寸每年变，但「导航开始折叠」这个行为点相对稳定 - 新增断点只需往 map 里加一行，逻辑层完全不动
- 非尺寸断点（如
dark-mode、reduced-motion）也走同一结构，不额外开@media块
@content 调用时三个最容易忽略的硬性约束
@content 是内容块注入机制，不是函数返回值，对调用语法极其敏感：
- 必须用大括号包裹：
@include mq(sm) { color: red; }✅；写成@include mq(sm); color: red;❌（@content为空） - 不能在
@content块里再嵌套另一个带@content的 mixin，比如@include mq(sm) { @include hover-state { ... } }，外层媒体查询结构会丢失 -
@include必须写在 CSS 规则块内部（即选择器后的大括号里），不能直接写在顶层或变量声明后，否则不产出任何 CSS
桌面端样式永远写在默认层（无媒体查询），移动端覆盖全靠 @include mq(sm) 往上叠加；别在 mixin 内部写 max-width 查询——它和 min-width 混用极易触发重叠或遗漏，这是编译后 CSS 行为不可预测的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
