&代表当前选择器的完整前缀，用于拼接类名或伪类，必须紧贴使用（如&:hover），不跨层、不跳级，编译期静态展开，零运行时开销。
Less里&到底代表什么
&在Less嵌套中不是“父选择器”的字面意思，而是“当前选择器的完整前缀”。它展开后是外层所有嵌套层级拼起来的结果，不是单层父级。比如.btn { &:hover { ... } }编译后是.btn:hover，而不是.btn .btn:hover——后者才是错误理解&为“父元素自身”导致的冗余写法。
写:hover:focus:disabled等伪类时的正确姿势
用&配合伪类是最常见也最容易出错的场景。关键点在于：伪类必须紧贴&，中间不能有空格；否则会变成后代选择器。
-
&:hover→ 正确，生成.card:hover -
& :hover→ 错误，生成.card :hover（匹配.card内部任意:hover元素） -
&.is-active→ 正确，生成.card.is-active -
&.is-active:hover→ 正确，生成.card.is-active:hover
实际例子：
.dropdown {
position: relative;
&__trigger {
padding: 8px 12px;
&:hover {
background: #f0f0f0;
}
&:focus {
outline: 2px solid #007bff;
}
}
&__menu {
display: none;
&.is-open {
display: block;
}
}
}
多重嵌套下&会展开成什么
遇到多层嵌套（如组件内再套修饰符），&会展开为完整路径，不是只取上一层。这既是能力也是陷阱。
-
.modal { .header { &::before { ... } } }→ 编译为.modal .header::before -
.modal { .header { &:hover::before { ... } } }→ 编译为.modal .header:hover::before - 但若想让
::before属于.modal本身，就不能依赖&，得显式写.modal::before或提层定义
容易踩的坑：以为&能“跳回上两级”，实际上它没有层级跳转能力，只有拼接能力。
需要拼接类名时用&还是字符串插值
当要生成.btn.btn-lg或.icon.icon--sm这类BEM风格修饰符时，&最直接；但若需动态拼接（比如根据变量加后缀），就得用字符串插值@{variable}。
-
.btn { &-lg { ... } }→.btn-lg -
.icon { &--sm { ... } }→.icon--sm - 但
.component { @{modifier}-theme { ... } }这种写法不合法，Less不支持变量参与选择器拼接；此时应改用.component.theme-dark结构，或用extend()复用样式
性能提示：&是编译期静态拼接，零运行时开销；而过度嵌套+滥用&会让CSS选择器过长，影响浏览器匹配效率。
真正难的不是记住&怎么用，而是每次写之前想清楚：这个样式规则最终应该匹配哪个真实DOM结构——&只是帮你把意图准确翻译成CSS的工具，不是魔法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
