断点必须统一定义在$breakpoints map中，键名语义化、值为纯数字；mixin需支持min/max/between三模式并含@content；媒体查询须顶层声明，禁止嵌入组件内部。
断点必须统一存在 $breakpoints map 里
散落在各处的 @media (min-width: 768px) 是后期维护噩梦。改一个值，得全局搜索、逐个替换，漏掉一处就导致 iPad 上布局错乱。所有像素值只该出现在一个地方：$breakpoints map 中，且键名带语义、值为纯数字（不带单位）。
常见错误包括：
- 把
768px直接写进 mixin 调用里，比如@include respond-to(768px)—— 这等于放弃语义，回归硬编码 - 用
em或rem当 map 键，如"md": 48em，但 Sass map 键匹配是字面量比对，"md"和md（无引号）不等价 - 断点顺序不是升序，比如
("lg": 992, "md": 768)，会导致map.get()返回null或逻辑颠倒
推荐写法：
$breakpoints: ( xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 );
@mixin 必须支持 min / max / between 三类行为
只写 @mixin respond-to($name) 的方案，在真实项目中撑不过两周。你很快会遇到“仅在 tablet 尺寸下生效”“桌面端最大宽度限制”“从 sm 到 xl 之间统一处理”这类需求，单参数 mixin 无法表达。
正确做法是封装一个支持多模式的 mq() mixin：
-
@include mq(sm)→@media (min-width: 576px) -
@include mq(max: md)→@media (max-width: 767px)（注意是 -1px，非 -1） -
@include mq(sm, lg)→@media (min-width: 576px) and (max-width: 991px)
关键细节：between 模式上限必须减 1px，不是 1；否则在 992px 边界上，sm 和 lg 可能同时命中，样式冲突。
@content 不是可选，是嵌套能力的唯一出口
没包 @content 的 mixin 只能返回字符串，调用时还得手动拼样式块，极易出错。更严重的是，它会让嵌套选择器失效——比如 &__title 在未被 @media 包裹的上下文中，编译后变成 .card@media 这种非法语法。
必须这样写：
@mixin mq($breakpoint, $max: false, $until: null) {
@if map.has-key($breakpoints, $breakpoint) {
$width: map.get($breakpoints, $breakpoint);
@if $until != null and map.has-key($breakpoints, $until) {
$min: $width;
$max-width: map.get($breakpoints, $until);
@media (min-width: $min) and (max-width: $max-width - 1px) {
@content;
}
} @else if $max {
@media (max-width: $width - 1px) {
@content;
}
} @else {
@media (min-width: $width) {
@content;
}
}
} @else {
@error "Unknown breakpoint `#{$breakpoint}`. Available: #{map.keys($breakpoints)}";
}
}
这个 @error 提示很关键：调用 @include mq(phone) 却没定义 phone？终端立刻告诉你可用的键名，而不是让你翻 config 猜拼写。
媒体查询不能塞进组件内部
这是最隐蔽也最常踩的坑。写成这样：
.card {
@include mq(lg) {
&__title { font-size: 1.5rem; }
}
}看似合理，实则危险。Sass 编译可能生成 .card@media 这种非法选择器，或因嵌套层级过深导致 CSS 权重失控、体积暴增。媒体查询是「条件」，不是「结构」。它应该作为顶层控制逻辑存在，和组件样式解耦：
- 移动端优先：默认写移动样式，用
@include mq(sm)往上叠加 - 桌面端优先：默认写桌面样式，用
@include mq(max: md)往下覆盖 - 组件内只写具体样式规则，不掺杂媒体逻辑
真正难的不是写对语法，而是让断点成为可查、可报错、可复用的配置项——它得像 API 文档一样清晰，而不是藏在某行 @media 后面的魔法数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
