& 在 less 中仅指代直接父选择器，非最外层或可跳级；空格决定选择器关系（连写、后代、多类）；嵌套过深或需跨级复用时应改用变量或扁平化写法。

& 不是 HTML 实体，写成 & 就直接编译失败。Less 里必须用原始符号 &，任何转义（如 &、&）都会触发 ParseError: Unrecognised input。

为什么 & 总是拼错选择器？

根本原因：它只代表当前规则块的直接父级，不是最外层，也不能跳级。嵌套越深，& 指代的范围越窄。

• .btn { .icon { &:hover { } } } → 编译为 .btn .icon:hover，& 指的是 .icon，不是 .btn
• 想生成 .btn:hover .icon？得写成 .btn:hover { .icon { } } 或提取变量：@btn: ".btn"; @{btn}:hover .icon { }
• 三层嵌套后还硬用 & 拼接，大概率产出 .a .b .c--modifier 这种冗余结构，而非预期的 .a--modifier .b .c

& 后面空格到底要不要？

有无空格决定选择器关系，这是最常翻车的地方。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• .card { &__header { } } → .card__header（无空格，连写类名）
• .card { & .header { } } → .card .header（有空格，后代选择器）
• .card { &.is-open { } } → .card.is-open（紧贴，同一元素多类）
• .link { &:hover { } } → .link:hover（伪类必须紧贴，& :hover 会变成 .link :hover）

什么时候该放弃 &，改用其他方案？

当出现以下任一情况，& 已经在拖累可维护性：

• 嵌套超过 3 层，且内部还要加伪类、属性选择器、媒体查询
• 需要跨层级复用某段父名（比如 .modal.is-open .dialog .close 中的 .modal.is-open）
• BEM 修饰符位置不固定（如想生成 .btn__icon--lg 而非 .btn--lg__icon）
• 团队协作中有人总把 & 当“自动向上找最近类名”用，结果每次改外层类名都要全局搜 & 替换

此时更稳妥的做法是：用变量存基础名（@block: "card";），或直接扁平化 + 语义类名（.card__header、.card--compact .card__header），而不是靠 & 硬凑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！