使用.media-up(md)等Mixin可省80%重复@media块，但需断点存map、参数用关键字、@content()显式调用，否则编译无声失效；断点必须定义为map，Mixin需守卫isdefined(@breakpoints)，且必须显式写@content()。
直接用 .media-up(md) 这类 Mixin 生成响应式样式能省掉 80% 的重复 @media 块，但前提是断点存 map、参数用关键字、@content() 显式调用——否则编译无声失效，浏览器里根本查不到对应样式。
断点必须存在 map 里，不能硬编码或传字符串
硬写 @media (min-width: 768px) 看似快，改设计稿时得全局搜索替换；传字符串如 .media("md") 会报错 Expected variable, function or keyword。
- 断点统一定义为 map：
@breakpoints: { xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px }; - Mixin 接收关键字参数：
.media-up(@size)，内部用map-get(@breakpoints, @size)取值 - 加守卫：
when (isdefined(@breakpoints))，避免断点未加载时整段规则静默跳过
@content() 必须显式声明，不能默认捕获
写成 .media-up(md) { color: red; } 不会生效——Less 不自动把大括号里的样式塞进媒体查询里。
- Mixin 内部必须写
@content();，否则编译后@media块空着 - 调用时必须用大括号包裹样式：
.my-btn { .media-up(md) { font-size: 16px; } } - 如果只设单个属性，另写变体更安全，比如
.media-up-font-size(@size, @val)，内部直接生成@media块
多条件媒体查询要分层，别拼字符串
@media (min-width: 768px) and (orientation: landscape) 这种组合，靠一个参数撑不住，强行扩展 .media(md, landscape) 会破坏类型安全，也难守卫。
立即学习“前端免费学习笔记（深入）”；
- 推荐分层嵌套：
.media-up(md) { & and (orientation: landscape) { @content(); } } - 利用
&语法生成复合查询，语义清晰且 Less 能正确编译 - 禁止让用户手动拼
"(min-width: @{bp}) and (orientation: landscape)"，字符串插值易出错、难 debug
区分 .media-up() 和 .media-down() 语义
混用 min-width 和 max-width 在同一层级，会导致 CSS 媒体查询嵌套过深，可读性差，还容易被浏览器忽略。
-
.media-up(@size)专用于移动优先：等价于@media (min-width: ...) -
.media-down(@size)专用于桌面回退：等价于@media (max-width: ...) - 组合区间（如 768px–1200px）必须嵌套写：
.media-up(md) { .media-down(xl) { ... } }，不能连写
最容易被忽略的是守卫和 @content() 的组合：断点变量没定义、@content() 漏写、或者用了字符串参数——这三者都会导致编译不报错但 CSS 里完全没生成对应规则，调试时得翻编译输出才能发现。
