Less嵌套需显式用&拼接伪类/状态类，避免权重爆炸和变量覆盖；超3层应改用BEM；媒体查询中禁用嵌套；Vue穿透语法需转义；@import须置顶且不可嵌套。
嵌套里漏写&导致选择器错乱
Less嵌套不是自动继承父选择器，漏掉&会生成完全错误的CSS。比如.btn { hover { color: red; } }编译成.btn hover，而不是你想要的.btn:hover——浏览器根本不会匹配这个选择器。
- 所有伪类（
:hover、:focus）、伪元素（::before）、状态类（.is-active）都必须显式用&拼接 -
&必须紧贴选择器，不能有空格：&:hover✅，& :hover❌ - 想生成
.btn-primary，写&-primary；想生成.btn.is-active，写&.is-active（注意中间没空格）
深层嵌套引发权重爆炸和覆盖困难
写.card { .header { .title { color: blue; } } }，编译结果是.card .header .title（权重0-3-0），比.card__title（0-1-0）高两级。后续想覆盖它，要么加!important，要么写更长的选择器，维护成本陡增。
- 超过3层嵌套就该警觉，优先改用BEM命名：
.card__title、.card__body - 用
&__element替代多层后代嵌套，既扁平又语义清晰 - 媒体查询里别堆嵌套：
@media (max-width: 768px) { .card { .body { p { ... } } } }→ 改用@at-root抽离
嵌套中误用/deep/或::v-deep
Vue里常用的/deep/或::v-deep是CSS作用域穿透语法，Less根本不认识。直接写进去会导致整个文件编译失败，报错类似ParseError: Unexpected token '/'。
- Less里不能直接写
/deep/ .cube-btn，必须转义：@deep: ~">>>"; @{deep} .cube-btn { background: red; } - 这个
~">>>"是字符串转义，最终输出>> .cube-btn，交给Vue处理 - 如果项目用的是CSS原生
@layer或@scope，别混进Less文件——两者语法不兼容
嵌套与@import顺序、变量作用域冲突
嵌套块里重定义变量，会影响同级或子级规则。比如&__header { @gap: 8px; margin-bottom: @gap; } &__body { @gap: 16px; padding-top: @gap; }，实际&__header拿到的是16px——因为变量被后声明覆盖了。
立即学习“前端免费学习笔记（深入）”；
- 嵌套内慎用同名变量；需要局部值，改用参数化mixin：
.section(@gap: 8px) { margin-bottom: @gap; } -
@import必须集中放在入口文件顶部，按variables → mixins → components顺序，否则嵌套里调用的mixin可能未定义 - 避免在嵌套中
@import其他文件——Less不支持嵌套作用域内的导入，会报错或静默失效
&精准拼接、用BEM扁平命名、用@at-root跳出上下文——而不是靠缩进营造安全感。 
