Less中&只绑定直接父级选择器，不跨层继承，嵌套多层时需逐层使用&，超过3层建议拆分；其展开为当前选择器完整前置路径，非仅最近一层。
Less中&到底能嵌套几层？
Less的&不是简单拼接，而是代表**当前选择器的完整前置路径**。它在嵌套规则里展开时，会把外层所有层级的选择器原样带进来，不是只取最近一层。
比如.btn { &__icon { ... } }编译后是.btn__icon；但.container { .sidebar { &__title { ... } } }会生成.container .sidebar__title——注意中间是空格，因为.sidebar是独立选择器，&只继承它自身，不“穿透”到.container。
-
&永远绑定在**直接父级选择器**上，不会跨多层向上追溯 - 如果想让
&带上更外层的上下文，得用显式重复，比如.container .sidebar { .container--active & { ... } } - 嵌套过深时，
&展开后选择器可能冗长甚至语义错乱，建议超过3层就考虑拆成独立类名
用&模拟BEM但又不想写死前缀
BEM风格里.block__element--modifier这种结构，靠&可以避免重复写.block，但要注意&本身不带分隔符。
错误写法：.btn { &__text { ... } &--primary { ... } } → 编译为.btn__text和.btn--primary，看起来对，但&--primary实际是.btn--primary，不是BEM要求的.btn--primary（这反而是对的）；真正容易错的是&__text--bold，会变成.btn__text--bold，而非.btn__text--bold（语法上没错，但逻辑上--bold应修饰__text，这时没问题）。
立即学习“前端免费学习笔记（深入）”；
- 要生成
.block__element--modifier，必须写成&__element--modifier，不能写&__element &--modifier -
&后面直接跟--或__是安全的；但& + &__icon这种加号连接会报错，Less不支持运算符拼接 - 如果块名是变量，比如
@block: btn，不能写@{block} { &__text { ... } }，因为&展开时不参与变量插值，得用.@{block}__text手动拼
&在伪类和属性选择器里怎么用？
&:hover、&[disabled]这些常见，但容易忽略两点：一是&必须紧贴冒号或方括号，中间不能有空格；二是复合伪类如&:not(:first-child)必须整个写在&后面，不能拆开。
- 正确：
.link { &:hover { color: blue; } &[aria-disabled="true"] { opacity: 0.5; } } - 错误：
.link { & :hover { ... } }（多了空格，编译成.link :hover，变成后代选择器） - 错误：
.input { &:focus &:valid { border-color: green; } }（这是两个独立规则，不是组合），要组合就得写&:focus:valid - 属性选择器里
&后直接跟[attr]没问题，但&[attr="val"]中的引号必须是英文双引号或单引号，不能用中文符号
为什么&有时编译出意料之外的选择器？
最常见原因是嵌套层级和&作用域理解偏差。比如.card { .header { & + .body { ... } } }，本意可能是“.card .header + .body”，但实际编译为.card .header + .card .body——因为&在.header作用域内，所以& + .body展开成.card .header + .card .body。
- 遇到
+ ~ >等组合器时，&会展开为完整父路径，不是仅当前选择器名 - 想避免这种问题，要么把
.body提出来和.header平级写，要么用~".body"字符串插值绕过&机制（不推荐，可读性差） - 调试技巧：打开Less编译器的“输出原始CSS”选项，一眼看出
&到底展开了什么
复杂嵌套里&的行为高度依赖外层结构，别凭直觉猜，每次不确定就编译看结果——它不像Sass的&那样有更灵活的“父引用”控制，Less里就是严格按嵌套链展开。
