Less嵌套需显式使用&引用父选择器，否则生成错误CSS；&可拼接类名或伪类，空格控制后代与连写；嵌套超3层易致特异性爆炸，媒体查询嵌套需警惕父选择器意外拼接。
嵌套选择器时，父选择器必须显式出现
Less 的嵌套不是“自动继承”，而是靠 & 符号拼接生成最终 CSS 选择器。如果漏写 &，Less 会把它当普通子选择器处理，导致生成的 CSS 完全不符合预期。
比如想写 .btn:hover 和 .btn:active，错误写法是：
.btn {
color: blue;
hover { color: red; } // ❌ 编译成 .btn hover {}
active { color: orange; } // ❌ 编译成 .btn active {}
}
正确写法必须用 & 显式引用父选择器：
.btn {
color: blue;
&:hover { color: red; } // ✅ 编译成 .btn:hover
&:active { color: orange; } // ✅ 编译成 .btn:active
}
-
&在嵌套中代表“当前层级的父选择器”，可多次使用（如& &表示重复两次） - 如果父选择器是复合的（如
.card .header），&会完整复现整个前缀 - 不写
&就是纯后代选择器，和 CSS 原生行为一致，但容易误以为是伪类/伪元素嵌套
用 & 拼接类名或属性时注意空格与连接符
想生成 .btn-primary 或 .btn.is-active 这类组合类名，必须控制 & 后是否带空格——有空格是后代，无空格是连写。
立即学习“前端免费学习笔记（深入）”；
.btn {
&-primary { background: #007bff; } // ✅ .btn-primary
&.is-active { opacity: 0.8; } // ✅ .btn.is-active（注意中间没空格）
& .icon { margin-left: 4px; } // ✅ .btn .icon（有空格，后代）
}
-
&-xxx和&.xxx是最常用模式，用于 BEM 或状态类扩展 -
&:not(.disabled)这种也合法，&会替换为完整父选择器 - 避免
&（HTML 实体）或\&（转义），Less 只认&
嵌套过深会导致 CSS 特异性爆炸和维护困难
Less 允许无限嵌套，但编译后选择器层级变深，CSS 优先级（specificity）会陡增，覆盖起来越来越难，而且可读性迅速下降。
.page {
.sidebar {
.nav {
.item {
&:hover {
.label { color: #333; } // 编译出 .page .sidebar .nav .item:hover .label
}
}
}
}
}
- 超过 3 层嵌套就该警惕：考虑拆成独立 class，或用
@mixin提取逻辑 - 调试时浏览器开发者工具里看到超长选择器，基本就是嵌套失控的信号
- 某些构建工具（如 webpack + less-loader）默认不限制嵌套深度，但团队应约定上限（建议 ≤3）
媒体查询嵌套要避免意外的父选择器拼接
在 Less 中把 @media 写在嵌套块内，它会自动挂载到当前父选择器下。这很方便，但也容易产出冗余或错误的选择器。
.dialog {
width: 300px;
@media (min-width: 768px) {
width: 500px; // ✅ 编译成 @media (min-width: 768px) {.dialog { width: 500px; }}
}
.content {
font-size: 14px;
@media (min-width: 768px) {
font-size: 16px; // ✅ 编译成 @media (min-width: 768px) {.dialog .content { ... }}
}
}
}
- 媒体查询内部若再用
&，会拼上整个外层路径，比如&:hover在 media 内会变成.dialog:hover，而非仅:hover - 想写全局响应式规则（不依赖父选择器），就把
@media放在顶层，不要缩进 - 多个断点嵌套时，注意编译后 CSS 的顺序——Less 按源码顺序输出，别指望它自动合并媒体查询
& 拼接，而不是直白写 class。真正需要关注的，是编译结果是否可控、是否符合你手写的 CSS 意图——毕竟浏览器只认 CSS，不认 Less。 
