Less嵌套媒体查询必须带括号和完整条件，漏空格、花括号或省略&会导致编译失败；&必须显式写出以绑定父选择器；变量不可插值到@media条件中，仅支持字面量或带单位变量；多层嵌套需验证编译结果。
嵌套媒体查询必须带括号和条件，否则编译直接失败
Less 不会把 @media max-width: 768px 当成合法语法——它要求完整的 CSS 媒体查询结构。漏掉括号、空格或花括号都会触发 ParseError: missing opening '{' 这类错误。
常见翻车写法：
-
@media(max-width: 768px) { ... }——@media和括号之间缺空格，部分 less-loader 版本会静默忽略或报错 -
@media (max-width: 768px) ...—— 没写{}，编译器找不到作用域起点 -
.nav { @media screen { color: red; } }—— 看似合法，但实际编译后是@media screen { .nav { color: red; } }，没问题；可一旦加了子嵌套又漏&，就出事
嵌套时 & 不是可选的，它是选择器拼接的关键开关
你写 .nav { @media (max-width: 768px) { display: none; } }，Less 编译出来是 @media (max-width: 768px) { .nav { display: none; } } —— 这看起来对，但只是巧合。真正起作用的是 & 隐式插入：Less 在该位置自动补上当前父选择器。
但如果你在媒体查询里再嵌一层，比如想控制子元素：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.nav { @media (max-width: 768px) { & { display: none; } & ul { padding: 0; } } } - ❌ 错误：
.nav { @media (max-width: 768px) { ul { padding: 0; } } }—— 编译后变成@media (max-width: 768px) { ul { padding: 0; } }，脱离了.nav上下文，样式失效
& 必须显式写出，才能确保生成的选择器路径正确。它不“冒泡”到外层作用域，只绑定最近一级父选择器。
变量只能引用，不能插值到 @media 条件中
Less 的 @media 后面只接受字面量条件，不支持字符串拼接或变量插值。下面这种写法会直接让编译器报 Invalid CSS after "@media"：
@mq-sm: ~"(max-width: 768px)"; @media @mq-sm { ... }-
@width: 768; @media (max-width: @width px) { ... }—— 单位不能拆开写
安全用法只有两种：
- 定义带单位的变量：
@sm: 768px; @media (max-width: @sm) { ... } - 用 Mixin 封装（适合多条件）：
.media-up(@size) { @media (min-width: @size) { @content(); } }，然后调用.media-up(1024px) { .nav { flex-direction: row; } }
多层嵌套媒体查询容易导致选择器爆炸，调试要盯编译结果
Less 的“冒泡”不是运行时行为，而是编译期静态展开。比如：
.card {
@media (min-width: 768px) {
@media (prefers-reduced-motion: reduce) {
& { animation: none; }
}
}
}
会编译为：
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
.card { animation: none; }
}
这看似省事，但问题在于：一旦嵌套过深或混用 Mixin，生成的 CSS 可能和你预期不一致。最稳妥的方式是打开最终输出的 .css 文件，确认 @media 块是否完整、选择器是否精准、有没有被构建工具（如 css-loader 或 mini-css-extract-plugin）意外截断或重排序。
尤其注意 Webpack 配置：less-loader 必须在 css-loader 之前，且 css-loader 的 importLoaders 要设为至少 1，否则 @import 的断点变量可能未被识别。
