& 是 less 中的父选择器引用符，用于精准还原当前嵌套规则的完整父路径，支撑 bem 四类命名结构并避免手动拼接。
什么是 & 在 Less 中的实际作用
& 是 Less 的父选择器引用符，它不是简单地拼字符串，而是把当前嵌套规则的完整父路径“带进来”。很多人误以为它只代表上一级选择器，其实它会还原整个嵌套链——这对生成 BEM 的 block__element--modifier 结构非常关键。
比如在 .btn { &__text { ... } } 中，& 展开后是 .btn；但若写成 .btn { &:hover { ... } }，& 就是 .btn:hover。BEM 要求修饰符必须绑定在 block 或 element 上，& 正好能保证这个绑定关系不丢失。
用 & 写 BEM 的三种典型结构
实际开发中，BEM 类名组合有明确层级约束：block 是根，block__element 是子元素，block--modifier 是块级修饰符，block__element--modifier 是元素级修饰符。Less 的 & 可以精准对应这四种场景：
-
.btn { &__icon { ... } }→ 编译为.btn__icon -
.btn { &--primary { ... } }→ 编译为.btn--primary -
.btn { &__icon { &--large { ... } } }→ 编译为.btn__icon--large（注意：这里&指向的是.btn__icon，不是.btn） -
.btn { &__icon { .btn--loading & { ... } } }→ 用于状态组合，如.btn--loading .btn__icon
容易踩的坑：嵌套过深导致 & 指向错乱
当嵌套超过两层时，& 的指向会变成最内层的完整路径，而不是你期望的 block 根。例如：
.card {
&__header {
&__title { color: red; }
}
}
这段代码编译结果是 .card__header__title，违反 BEM 原则（BEM 不允许三级下划线）。正确做法是终止嵌套，显式写出 block 根：
- ❌ 错误：在
&__header内再嵌&__title - ✅ 正确：写成
.card__title { ... }或用变量@block: card; @{block}__title { ... } - ⚠️ 注意：
&不支持“向上跳级”，无法用&^或类似语法回退到上一层（那是 Sass 的功能，Less 没有）
配合变量提升 BEM 复用性
纯靠 & 写 BEM 容易在多个 block 间重复劳动。推荐用变量固定 block 名，再结合 & 构建结构：
@block: modal;
.@{block} {
&__content { padding: 1rem; }
&--open { opacity: 1; }
&__close { position: absolute; }
}
这样既保持语义清晰，又避免硬编码。如果后续要批量替换 block 名，改一个 @block 就行。不过要注意：变量插值 @{block} 和 & 不能混用在同一选择器里（如 &@{block}__xxx 是非法语法），必须分开处理。
BEM 的本质是约定，而 & 是让这个约定在 Less 里不靠手动拼接就能自然落地的最小工具。真正难的不是写法，而是时刻意识到：每个 & 都在悄悄复制一整条选择器路径，多一层嵌套，就多一分失控风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
