嵌套媒体查询必须写成@media (条件) { }，括号内需有合法CSS媒体条件且前后空格；漏条件、变量直插、不用&、超三层嵌套等均会导致编译失败或无效CSS。
嵌套媒体查询必须用 @media (条件) { }，不能写成函数调用
Less 不支持 @media(max-width: 768px) 这种无空格、无括号的写法——它会被解析为函数调用，直接报错 ParseError: missing opening '{'。正确写法只有一种：@media (max-width: 768px) { }，括号内必须是合法 CSS 媒体条件，且前后有空格。
常见翻车点：
- 漏掉括号里的条件，比如写成
@media { .foo { color: red; } }，编译失败 - 把变量当条件直插：
@mq: ~"(max-width: 768px)"; @media @mq { }——@media后不接受变量，只接受字面条件 - 在嵌套块里忘了用
&，导致父选择器没拼上，生成无效 CSS
& 是嵌套媒体查询生效的关键，不是可选语法糖
写 .nav { @media (max-width: 768px) { display: none; } } 是错的：编译后变成 @media (max-width: 768px) .nav { display: none; }（缺少花括号），浏览器直接忽略整条规则。
必须显式用 & 绑定父选择器：
立即学习“前端免费学习笔记（深入）”；
.nav {
@media (max-width: 768px) {
& {
display: none;
}
}
}
这样才编译出标准有效的 @media (max-width: 768px) { .nav { display: none; } }。注意：& 只绑定最近一级父选择器，不能跨层引用更外层作用域。
断点变量可以复用，但不能插值到 @media 后面
变量定义和使用要分开：@sm: 768px; ✅，然后 @media (max-width: @sm) { } ✅；但 @mq-sm: ~"(max-width: 768px)"; @media @mq-sm { } ❌，会报 Invalid CSS after "@media"。
真正安全的动态断点方案只有两种：
- 用变量直接参与计算：
@media (min-width: @sm) and (orientation: landscape) { } - 封装成混合（Mixin）：
.media-down(@size) { @media (max-width: @size) { @content(); } }，再调用.media-down(@sm) { ... }
字符串拼接、运行时插值、守卫判断断点大小——这些在 @media 条件里全都不起作用，所有逻辑都在编译期固化。
嵌套层级超过三层就该警惕权重爆炸和维护成本
像 .header { .nav { .item { .link { @media (hover: hover) { &:hover { ... } } } } } } 这种写法，编译后选择器长度翻倍，不仅难调试，还容易意外覆盖其他组件的 a:hover。
建议：
- 嵌套超三层就拆：把
.nav-item、.nav-link定义为独立类名，用语义化命名替代 DOM 深度依赖 - 用
:extend()降权，比如统一 hover 样式，再让具体类继承 - 媒体查询尽量贴近实际样式声明位置，别一股脑堆在文件顶部或根级
最常被忽略的是：嵌套媒体查询本身不解决响应式逻辑，它只是让 CSS 更易组织；真正决定是否生效的，还是最终输出的 CSS 是否被浏览器正确解析、是否被更高优先级规则覆盖、以及 JS 是否干扰了状态类切换。
