必须用 $breakpoints map 统一管理断点值，所有像素值仅出现在 _variables.scss 中，键名语义化（如 xs、sm），配合支持 min/max/between 三模式的 mq() mixin，并禁止组件内嵌套 @media。
为什么直接写 @media 容易让项目失控
改一个断点要全局搜索替换，@media (min-width: 768px) 出现在 _header.scss、_card.scss、_utils.scss 里，漏改一处，iPad 上导航就塌成两行；更常见的是 max-width 边界没对齐，比如 md 断点设了 768px，lg 设了 992px，中间缺了 and (max-width: 991px)，结果样式意外继承，调试时 DevTools 里看到三条规则同时生效却不知哪条胜出。
必须用 $breakpoints map 统一管理断点值
所有像素值只允许出现在一个地方：_variables.scss 里的 $breakpoints map，且键名必须是语义化的布局状态，不是设备名：
$breakpoints: ( xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 );
- 不写
$breakpoint-tablet或$bp-768—— 设备尺寸每年变，但「导航栏开始折叠」这个行为点相对稳定 - 值不带单位（如
sm: 576px），由 mixin 统一加px或转em，避免混用 - 新增非尺寸断点（如
dark-mode、reduced-motion）也走同一 map 结构，不额外开@media块
@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 模式必须用 max-width: map-get($breakpoints, $upper) - 1，否则相邻断点会同时命中；mixin 开头必须加校验：
@if not map.has-key($breakpoints, $breakpoint) {
@error "Unknown breakpoint '#{$breakpoint}'. Available: #{map-keys($breakpoints)}";
}
禁止在组件内部嵌套 @media，只在根选择器下用一次
在 .card__title 里再套一层 @media，会导致生成重复的媒体查询块、选择器权重升高（如 .card .card__title 变成 .card .card__title:hover），编译后 CSS 体积虚高。
- 只在组件根选择器（如
.card { }）下用一次@media嵌套 - 子元素用
&__element继承上下文，不要重复写@media - 工具类（如
.text-center）禁用嵌套，统一收口到_utilities.scss用@each生成 - 检查编译后 CSS：搜索
@media，确认每个块内选择器都以你预期的根类名开头
真正难的不是写对语法，而是把断点当作可查、可报错、可复用的配置项来管理——它得像 API 文档一样清晰，而不是一段散落在各处的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
