less中&代表上一级选择器的完整表达式，用于复用外层选择器生成复合类（如.btn.disabled）、bem样式（.menu__item）等，不带空格连接，需显式空格才生成后代选择器。
Less中&父选择器的基本用法
Less的&不是拼接字符串，而是代表**上一级选择器的完整表达式**。它解决的是“在嵌套规则里复用外层选择器”的问题，比如给同一个元素添加多个状态类或伪类样式。
常见错误是以为&只代表父类名，结果写出.btn { &:hover { color: red; } }却期待生成.btn:hover——这其实是对的；但换成.btn { &.disabled { opacity: 0.5; } }时，有人误以为会生成.btn .disabled（空格分隔），实际生成的是.btn.disabled（无空格，复合类）。
-
&展开后**不带空格**，始终是选择器连接（如.a.b、.a:hover） - 如果需要后代选择器（带空格），得显式写空格：
.a { .b { color: blue; } }→.a .b -
&可多次使用：.card { &__header { font-weight: bold; } &__footer { margin-top: auto; } }→.card__header和.card__footer
用&生成BEM风格复合类的典型写法
BEM命名（block__element--modifier）是&最自然的用武之地。它避免重复写block前缀，也防止手误漏掉下划线。
比如定义.menu组件：
.menu {
&__item {
padding: 8px 12px;
}
&__item--active {
background: #007bff;
}
&__item:hover {
background: #f8f9fa;
}
}
编译后是.menu__item、.menu__item--active、.menu__item:hover。注意&__item--active里&替换成.menu，不是.menu__item——&永远指**直接父选择器**，不递归。
- 想让
--active只作用于.menu__item？必须嵌套：&__item { &--active { ... } } - 想加全局修饰符（如
.theme-dark .menu__item）？不能靠&，得额外写一层嵌套或用@at-root - 变量不能直接插在
&后面：&@{suffix}无效；要用~"#{&}#{@suffix}"（字符串插值）
&与@at-root配合处理全局作用域
当需要把某个样式“提”到根级（比如覆盖第三方库、或写CSS-in-JS注入的全局类），&自己做不到，必须配@at-root。
例如：希望.dialog组件内的button在.dialog.is-open时变色，但又不想让规则挂在.dialog下：
.dialog {
&.is-open {
@at-root .dialog__confirm-button {
background: green;
}
}
}
编译结果是独立的.dialog__confirm-button，而非.dialog.is-open .dialog__confirm-button。这里@at-root让内部规则脱离嵌套上下文。
-
@at-root后跟选择器时，&在它内部**失效**（因为已脱离原嵌套链） - 若需保留父级上下文，用
@at-root (with-rules) { ... }，但通常没必要 - 过度使用
@at-root会让样式来源难追踪，建议只在明确需要打破嵌套时用
容易忽略的&边界情况
&的行为在多重嵌套、伪类组合、媒体查询里容易出人意料。
比如：.container { @media (min-width: 768px) { &.wide { padding: 20px; } } } → 编译为@media (min-width: 768px) { .container.wide { ... } }。这里&仍指.container，没被@media影响。
- 伪类连写：
&:not(:first-child):hover→.target:not(:first-child):hover，没问题 - 但
&:hover:not(&)会报错——&不能出现在选择器函数参数里 - 属性选择器中不能用
&：[data-id="&"]非法，得用插值[data-id="@{name}"] - 最坑的是：如果父选择器含逗号分组（
.a, .b { &.active { ... } }），&会展开为.a.active, .b.active，不是.a, .b.active
真正麻烦的从来不是语法本身，而是团队里有人把&当字符串模板用，或者在复杂嵌套里默认它能跨层级回溯——它不能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
