Less中嵌套@media合法但需严格遵循语法：必须带括号和条件，变量只能引用不能插值，漏写&或未定义断点会导致编译失败或CSS无效。
@media 本身是标准 CSS 规则，Less 不“支持”或“不支持”它——它原样保留并输出。真正影响可用性的，是你怎么写、在哪写、参数怎么传。
嵌套写法是否合法？
合法，但必须符合 Less 编译逻辑：@media (max-width: 768px) { } 可以写在选择器内部，比如 .btn { @media (hover: hover) { &:hover { color: red; } } }，编译后会正确生成 @media (hover: hover) { .btn:hover { color: red; } }。
常见错误是漏括号或条件：写成 @media max-width: 768px 或 @media(max-width: 768px)（缺空格）都会触发 ParseError: missing opening '{'。
变量能不能直接插进 @media 条件里？
不能插值，只能引用已定义的变量值。
✅ 正确：@sm: 768px; @media (max-width: @sm) { ... }
❌ 错误：@mq: ~"(max-width: 768px)"; @media @mq { ... } —— 编译直接报 Invalid CSS after "@media"。
变量必须是带单位的数值（如 768px）或纯数字（如 0），不能是字符串拼接结果。
为什么写了 @media 却没生效？
三个高频原因：
• & 漏写：嵌套时没用 & 显式绑定父选择器，比如 .nav { @media (max-width: 768px) { display: none; } } 会编译成非法 CSS（缺少外层选择器）；
• @content() 漏写：自定义 Mixin 里没声明 @content();，样式块不会被注入到媒体查询内；
• 断点变量未定义或未 import：比如用了 @media (min-width: @lg)，但 @lg 在当前文件没声明也没通过 @import 加载，编译静默失败，CSS 里根本没这段规则。
多条件媒体查询怎么写才可靠？
单参数 Mixin 处理不了 @media (min-width: 768px) and (orientation: landscape) 这类组合。
推荐做法：
• 不拼字符串（~"@{cond1} and @{cond2}" 容易出错且无法类型守卫）；
• 分层封装：先用 .media-up(@size) 控制宽度，再在外层加 @media (orientation: landscape) 包裹；
• 或者直接写原生 @media 块，只把断点值抽成变量，比如 @media (min-width: @md) and (orientation: landscape)。
立即学习“前端免费学习笔记（深入）”；
嵌套和 Mixin 看似省事，但一旦断点分散、& 错位、@content() 忘写，调试时得翻编译后的 CSS 才能定位问题——这比直接写标准媒体查询更费时间。 
