断点必须统一定义为递增 map 并通过 map-get 安全取值，mixin 需含守卫和 @content() 占位符，@media 嵌套须合法且禁用字符串拼接，否则编译静默失效。
断点必须存成 map，不能硬编码像素值
硬写 @media (min-width: 768px) 看似快，改设计稿时得全局搜索替换，还容易拼错单位或漏改某处。真正可维护的做法是统一定义：@breakpoints: { xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px };
所有断点值必须严格递增，避免 767px / 768px 留出 1px 空隙导致样式不生效；map-get(@breakpoints, @size) 是唯一安全取值方式，不能用 @@size 或字符串拼接。
- 别在多个文件里重复定义
@sm: 768px—— 变量分散就等于断点失控 - 修改断点后，必须同步检查
@container-max-widths是否匹配，否则容器宽度会“撑破”布局 - Webpack 中若用了
modifyVars注入主题，确认它没覆盖你本地的@breakpointsmap
.media-up() Mixin 必须显式调用 @content()
.media-up(md) { color: red; } 不会生成任何媒体查询——因为 Mixin 内部没写 @content()，那块样式就被丢掉了。Less 不会默认捕获大括号里的内容。
正确写法必须包含占位符：@content();，且调用时必须用大括号包裹样式块：.btn { .media-up(md) { font-size: 16px; } }
- Mixin 定义里要加守卫：
.media-up(@size) when (isdefined(@breakpoints))，否则断点未引入时整段静默跳过 - 调用时必须用关键字，不能传字符串：
.media-up("md")会报错Expected variable, function or keyword - 别混用大小写：
MD和md在 map 中是不同 key，漏掉守卫就查不到值
嵌套 @media 时必须带完整条件且不能插值
@media 本身是标准 CSS 规则，Less 原样保留输出，但写法稍有不慎就会编译失败或生成非法 CSS。
✅ 正确：@sm: 768px; @media (max-width: @sm) { ... }
❌ 错误：@mq: ~"(max-width: 768px)"; @media @mq { ... } —— 编译直接报 Invalid CSS after "@media"
- 必须带括号和条件：
@media max-width: 768px或@media(max-width: 768px)都会触发ParseError: missing opening '{' - 嵌套时漏写
&会导致 CSS 无效：.nav { @media (max-width: 768px) { display: none; } }编译后缺少外层选择器 - 不要在
@media内部再嵌套@media—— Less 不识别子级@media为规则，会原样输出成非法语法
多条件查询别手动拼字符串
像 @media (min-width: 768px) and (orientation: landscape) 这种组合，不能让用户传 "(min-width: 768px) and (orientation: landscape)" —— 缺乏类型校验，也难 debug。
推荐分层嵌套：.media-up(md) { & and (orientation: landscape) { ... } }，利用 & 生成合法复合查询；或者直接写原生块，只把断点值抽成变量：@media (min-width: @md) and (orientation: landscape)
- 如果非要支持多参数，拼接逻辑必须封装在 Mixin 里，禁止暴露给调用方
- 别用
~"@{cond1} and @{cond2}"拼接 —— 容易出错且无法做类型守卫 - 所有逻辑都在编译期固化，一旦漏掉
@content()或断点 map 未加载，就彻底静默失效，连 warning 都没有
@content() 忘写了，或者 @breakpoints 根本没 @import 进来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
