less 中 & 后加空格会生成后代选择器，如 & :hover 编译为 .btn :hover；正确写法是 &:hover；& 仅字面拼接不解析语义，媒体查询中只绑定最近父选择器，调试应直接查看编译输出。
Less 中 & 后加空格会生成后代选择器
这是最直接、也最容易被忽略的机制：& 后面**只要出现空格**，Less 就把它当成分隔符，编译成 CSS 的后代选择器（空格分隔），而不是你想要的自身伪类或修饰符拼接。
常见错误现象：写 & :hover 或 & ::before，结果生成 .btn :hover（匹配 .btn 内部任意悬停元素），而非 .btn:hover（按钮自身悬停）。
- ✅ 正确写法：
&:hover、&::after、&.is-active - ❌ 错误写法：
& :hover、& ::after、& .is-active - ⚠️ 注意：冒号前不能有空格，双冒号
::必须紧贴&，写成&:after虽能编译，但部分浏览器不支持单冒号伪元素语法，实际无效
用 & 拼接 BEM 修饰符时层级必须显式表达
BEM 类名如 .btn--large 或 .btn__icon--hover 不是靠 & 自动推导出来的，它只做字面拼接。你写 &__icon--large，Less 就老老实实拼成 .btn__icon--large，不会“理解”你想把 --large 应用到父级上。
- ✅ 想生成
.btn--large__text：写.btn--large { &__text { ... } } - ✅ 想生成
.btn__icon--large：写.btn { &__icon { &--large { ... } } }（嵌套两层&） - ❌ 不能靠
&__icon--large一步到位，因为&不解析修饰符语义，只做字符串连接
& 在媒体查询或 mixin 中只绑定字面最近父选择器
当你把 & 放在 @media 块里，或者封装进带条件判断的 mixin 里，它依然只认当前嵌套层级中**写在它上面最近的一行选择器**，不会向上穿透、也不会响应运行时动态添加的类名（比如 JS 加的 .theme-dark）。
- ✅ 编译可预期：
.card { @media (max-width: 768px) { &__header { padding: 8px; } } }→@media (max-width: 768px) { .card__header { ... } } - ❌ 无法继承动态类：
.card { &.theme-dark { color: white; } }是静态的，JS 后加.theme-dark不会触发该规则重新计算 - ⚠️ 性能提示：过度嵌套
&+@media+ mixin 容易导致 CSS 输出冗余，建议复杂逻辑拆到顶层或用变量控制
调试 & 生成结果的最快方法
别猜，直接看编译输出。Less 不报错，但生成的选择器错了，样式就失效——这种问题往往卡在视觉层，很难定位。
- 用
lessc input.less --no-color查看原始编译结果，搜索目标类名确认拼接是否符合预期 - 浏览器 DevTools 里检查元素，看 computed styles 对应的选择器是不是你写的那个，不是就说明
&拼错了 - 临时加个唯一属性测试：
& { outline: 2px solid red !important; }，看红框套的是谁，立刻验证&绑定对象
真正难的不是语法记不住，而是 & 看似智能，实则完全机械——它不理解 BEM、不识别主题、不感知 DOM 变化，只忠实地做字符串拼接。所有“意外”，几乎都源于忘了这点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
