less中&符号引用的是直接外层选择器，每次仅回退一级；嵌套越深，&越靠近当前层级，如.btn {.icon { &:hover }}中&指.icon而非.btn。
Less中&符号到底引用谁？
它引用的是**直接外层选择器**，不是最外层，也不是任意父级。嵌套越深，&每次只回退一级。比如在.btn { &:hover { ... } }里，&就是.btn；但如果写成.btn { .icon { &:before { ... } } }，这里的&指代的是.icon，不是.btn。
常见错误是以为&能跨层跳转，结果编译出的CSS完全不符合预期——比如想生成.btn:hover .icon，却误写成.btn { .icon { &:hover { ... } } }，实际产出的是.btn .icon:hover。
用&拼接类名时的空格陷阱
有无空格决定是后代选择器还是复合类名。这是最容易踩坑的地方。
-
.card { &--featured { ... } }→ 编译为.card--featured（无空格，连写） -
.card { & .header { ... } }→ 编译为.card .header（有空格，后代） -
.card { &.is-active { ... } }→ 编译为.card.is-active（紧贴，同元素多类）
漏掉空格或错加空格，会导致样式不生效或作用范围错乱。建议写完立刻看编译结果，别靠记忆猜。
在伪类/伪元素中正确使用&
伪类如:hover、:focus，伪元素如::before，必须和&紧连，否则会被当作新选择器解析。
- ✅ 正确：
.link { &:hover { color: red; } }→.link:hover - ❌ 错误：
.link { & :hover { ... } }→.link :hover（空格导致变成后代匹配） - ✅ 伪元素：
.badge { &::after { content: ""; } }→.badge::after
注意::before和::after是双冒号语法，Less不校验这个，但浏览器只认双冒号（旧单冒号兼容性另说），别写成&:before就默认能用。
嵌套过深时&不够用怎么办？
&只能引用上一层，如果真需要跨层组合（比如.modal .dialog .close要同时响应.modal.is-open .dialog .close），就不能只靠&。这时候得手动重复或提取变量：
- 避免过度嵌套：三层以上就该考虑拆分选择器或用BEM命名
- 用变量暂存父级：
@modal: ".modal"; @{modal}.is-open & { ... } - 更稳妥的做法是放弃深层嵌套，改用扁平结构 + 语义化类名，比如
.modal__close和.modal--open .modal__close
别为了炫技硬套&，编译后的CSS可读性和维护成本比嵌套“看起来整洁”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
