真正可用的.media-up() Mixin核心是参数可读、可查、可守卫：断点存map、加isdefined守卫、用关键字而非字符串传参、显式调用@content()、拆分up/down语义、避免嵌套@media及手动拼接条件。
直接用 .media() 这类 Mixin 生成响应式样式，能省掉 80% 的重复 @media 块，但前提是参数设计对、调用位置准、断点管理稳——否则编译无声失效，浏览器里查不到样式，比手写还难 debug。
怎么写一个真正可用的 .media-up() Mixin
核心不是“支持传参”，而是让参数可读、可查、可守卫。硬编码 @media (min-width: 768px) 看似快，改断点时得全局搜索替换；而用键名（如 md）查表取值，改一处全生效。
- 断点必须存为 map：
@breakpoints: { xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px }; - Mixin 要加
when (isdefined(@breakpoints))守卫，否则断点变量没定义时整段规则静默跳过 - 别用字符串传参：
.media("md")会报错；必须用关键字：.media(md)，再用map-get(@breakpoints, md)取值 - 推荐拆成两个基础 Mixin：
.media-up(@size)对应min-width，.media-down(@size)对应max-width，语义清晰不混淆
为什么 @content 必须显式传入，不能默认嵌套
Less 的 @content 是占位符，不是自动捕获上下文。写成 .media(md) { color: red; } 不会生效——Mixin 内部没声明 @content()，那块样式就丢了。
- 正确写法是：
.media(md) { @content(); }，调用时用大括号包裹样式：.my-btn { .media(md) { font-size: 16px; } } - 漏掉
@content()是静默失败，编译器不报错，但 CSS 里根本没生成对应媒体查询块 - 如果想省略大括号（比如只改一个属性），得另写一个单属性变体：
.media-up-font-size(@size, @val)，内部直接写@media (min-width: ...) { font-size: @val; }
多条件媒体查询（如横屏+最小宽度）怎么安全拼接
@media (min-width: 768px) and (orientation: landscape) 这种组合，不能靠一个参数搞定。强行塞进 .media(md, landscape) 会破坏类型安全，也难守卫。
- 推荐方案：用字符串拼接 +
~"@{conditions}"，但拼接逻辑必须封装在 Mixin 内，禁止让用户手动拼"(min-width: 768px) and (orientation: landscape)" - 更稳妥的是分层：先用
.media-up(md)包一层，里面再套& and (orientation: landscape)——利用 Less 的&语法生成复合查询 - 避免在
@media内部再写嵌套@media：@media (min-width: 768px) { @media (orientation: landscape) { ... } }会被原样输出，不被识别为嵌套规则 - 横屏判断要加单位守卫：
when (@orient = landscape) or (@orient = portrait)，防止传入非法值导致整个规则跳过
常见失效原因：作用域、顺序、优先级三连坑
样式没出来，90% 不是 Mixin 写错了，而是它被放在了错误的位置或被覆盖了。
-
.nav { .media-up(md) { ... } }→ 生效范围仅限于.nav下的子选择器；想控制整个导航组件，应在顶层调用：.nav { ... }; .media-up(md) { .nav { ... } } - 忘记传参又没设默认值：
.media-up()不带参数，且 Mixin 定义里没写@size: md，则匹配失败，规则跳过 - 用
!important盖 Mixin 输出的样式，结果在某个断点下优先级反超，表现为“写了却没反应” - Webpack 的
less-loader默认关闭 JS 表达式：javascriptEnabled: false，若 Mixin 里用了unit(@val, px)，需手动开启该选项
最易被忽略的一点：Mixin 封装的是静态逻辑，它不感知窗口 resize，也不替代媒体查询本身——只是帮你把 @media 写得更干净、更集中、更难出错。一旦断点变量定义混乱、@content 漏写、或调用上下文错位，问题就会藏得很深，只能靠检查最终生成的 CSS 文件来定位。
