Less 中 & 必须紧贴伪元素（如 &::after），空格会导致生成后代选择器；BEM 修饰符需注意拼接逻辑；& 仅绑定字面最近父选择器，不响应动态类名。
Less 的 & 能帮你写出紧凑、可维护的伪元素规则，但稍不留神就会编译出完全错误的选择器——比如本想控制自身 ::after，结果生成了后代匹配。
伪元素必须紧贴 & 写，不能有空格
这是最常踩的坑。Less 把 & ::after（中间有空格）解析为后代选择器 .btn ::after，而你要的是 .btn::after。
- ✅ 正确：
.btn { &::after { content: ""; } }→ 编译为.btn::after - ❌ 错误：
.btn { & ::after { } }→ 编译为.btn ::after（带空格，匹配子元素里的::after） - ⚠️ 注意：浏览器只认双冒号语法
::before/::after，写成&:before虽然部分 Less 版本能编译，但实际无效
&:hover::after 和 &:hover &::after 完全是两回事
前者是“悬停时渲染自身的伪元素”，后者是“悬停时渲染子元素里的伪元素”，语义和效果天差地别。
- ✅
.icon { &:hover::after { opacity: 1; } }→.icon:hover::after - ❌
.icon { &:hover &::after { } }→.icon:hover .icon::after（注意中间空格，是后代关系） - ? 实际场景：按钮带图标，悬停时图标右侧加提示气泡，就该用
&:hover::after；若想让子容器在父悬停时显示装饰，才考虑带空格的写法
BEM 修饰符 + 伪元素容易拼错结构
当父选择器本身含 BEM 修饰符（如 .btn--large），&__icon 会严格拼成 .btn--large__icon，这符合 BEM 规范；但如果你本意是 .btn__icon--large，就不能靠 & 直接生成。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确拼接：
.btn--primary { &__text { font-weight: bold; } }→.btn--primary__text - ❌ 无法实现：
.btn { &__icon--large { ... } }→.btn__icon--large（没体现修饰符层级） - ? 替代方案：改用变量或嵌套一层再用
&，例如.btn { &__icon { &--large { ... } } }
真正麻烦的不是语法本身，而是当你把 & 嵌在多层媒体查询或条件 mixin 里时，它只绑定**字面最近的父选择器**，不感知运行时类名变化——比如动态加的 .theme-dark 不会被 & 继承。这种隐性限制，往往要到样式失效才被发现。
