Less嵌套选择器编译失败最常见原因是语法错误导致静默丢弃后续内容，如mixin调用漏括号、使用Vue专属选择器、@at-root配对错误等；此外嵌套缩进不等于DOM层级，易生成不匹配的选择器，或因权重爆炸、深度穿透语法不兼容而失效。
Less嵌套选择器编译后完全没生成CSS
最常见原因是语法错误导致编译中断，后续所有规则被跳过。Less不会报错就停在出错行，而是静默丢弃从错误点开始的全部内容。
常见断点位置：
-
&:hover { .transition(); .color-change; }—— 第二处.color-change漏了括号，.transition()是 mixin 调用，.color-change却没写成.color-change();，整个块失效 - 嵌套里写了
/deep/或::v-deep—— Less 不认识这些 Vue 特有深度选择器，直接报ParseError: Unrecognised input - 用了
@at-root但没配对大括号，或@at-root后紧跟空行或注释，某些 less-loader 版本会解析失败
实操建议：用命令行单独跑 lessc style.less 看真实报错；别依赖 IDE 实时预览，它常缓存旧结果。
嵌套写对了，但浏览器里样式不生效
不是没编译，是生成的选择器根本匹配不到目标元素。核心问题在于你误以为嵌套缩进 = DOM 层级映射，而 Less 只做字符串拼接。
立即学习“前端免费学习笔记（深入）”；
典型翻车现场：
-
.card { .header { .title { color: red; } } }→ 编译出.card .header .title（后代选择器），但你的 HTML 是<div class="card"> <h1 class="title">，中间根本没有 <code>.header -
.btn { &.primary { &.large { display: block; } } }→ 编译出.btn.btn.primary.btn.large，要求一个元素同时带四个类名，且.btn出现三次，实际 DOM 只有class="btn primary large" -
.modal { & .close { opacity: 0.5; } }→&后多了一个空格，输出.modal .close（后代），而不是.modal.close（同元素多类）
验证方法：Ctrl 点击编译后的 CSS 文件，搜 .modal .close 这类带空格的长选择器，看是否真对应你的 DOM 结构。
响应式或伪类嵌套后权重爆炸、覆盖不了
比如 @media (max-width: 768px) { .card { .body { p { font-size: 14px; } } } }，编译后每条规则都带上完整前缀，p 的选择器变成 @media (max-width: 768px) { .card .body p { ... } }，权重 0-3-1，比原生 p 高两级，后续想调小字号基本只能靠 !important。
正确做法是用 @at-root 抽离：
.card {
@at-root @media (max-width: 768px) {
&__body p {
font-size: 14px;
}
}
}
这样输出的是 @media (max-width: 768px) { .card__body p { ... } }，权重回到 0-2-1，且类名语义清晰。
注意：@at-root 必须在已有选择器内部使用，不能独立写 @at-root { .foo { } }，否则报错。
Vue 项目里 Less 嵌套无法穿透子组件样式
在 <style lang="less"></style> 里直接写 /deep/ .cube-btn，Less 编译器不认识，整段被忽略。这不是 Vue 配置问题，是语法层面不兼容。
必须转义：
- 声明变量：
@deep: ~">>>"; - 使用：
@{deep} .cube-btn { background: red; }
如果项目用的是老版本 Vue CLI（≤4.x），>>> 可能不被支持，得降级用 /deep/ 并配合 vue-style-loader 的 scoped 选项，但更稳的方式是把这类穿透样式抽到全局 common.less 中，通过 vue.config.js 的 lessOptions.additionalData 注入。
真正容易被忽略的一点：嵌套层级本身不影响穿透能力，但一旦你在嵌套里混用 & 和 @deep，比如 .wrapper { @{deep} .btn { } }，Less 会先拼字符串再转义，可能生成非法 CSS。务必让 @{deep} 处于顶层作用域。
