Less嵌套需显式用&控制拼接，避免多层嵌套和冗余选择器；慎用于组件库、CSS-in-JS、响应式断点及复杂伪类；循环生成类要防体积膨胀和解析性能问题。
Less嵌套怎么写才不会生成冗余选择器
Less嵌套本身不智能，它只是机械拼接父选择器和子选择器。比如 .card 里写 &:hover，会生成 .card:hover；但若在里面再写 .header，就会变成 .card .header（空格），而不是你想要的 .card-header（连字符）。这是最常踩的坑——以为嵌套=自动语义合并。
实操建议：
- 用
&显式控制拼接位置：.card { &-header { ... } }→ 输出.card-header - 避免多层深度嵌套：超过 3 层就容易失控，生成如
.layout .sidebar .nav .item.active这类过长选择器 - 当需要组合多个已有类（如
.btn.primary.large），别靠嵌套硬凑，直接平级写.btn.primary.large { ... } - 注意空格含义：
.a .b（后代） vs.a.b（同时含两个类） vs.a > .b（子元素）——嵌套中漏掉&或空格，结果天差地别
什么时候不该用Less嵌套
嵌套不是银弹。当你在写组件库、CSS-in-JS 混用、或需要高优先级覆盖样式时，强行嵌套反而坏事。
典型场景：
- 需要覆盖第三方样式（如 Ant Design 的
.ant-btn），嵌套后选择器权重飙升，后续更难覆盖 - 用
:global()或:local()做 CSS Modules 时，嵌套会破坏局部作用域逻辑 - 响应式断点里嵌套：写
@media (min-width: 768px) { .card { width: 100%; } }没问题，但若把整个媒体查询塞进.card块里，可读性骤降，且无法被其他组件复用该断点逻辑 - 伪类组合复杂时，比如
a:not(:hover):focus，Less嵌套很难清晰表达，不如直接写原生选择器
&:hover 和 &:active 嵌套失效的常见原因
看起来很直白的写法，却常常编译出错或没生效，根本原因往往不是语法错，而是层级或作用域干扰。
排查要点：
- 确认是否在带
!important的全局规则下，导致伪类样式被忽略 - 检查是否用了
extend()或merge()，它们可能吞掉伪类声明 - 父选择器含属性选择器时要小心：
[data-type="card"] { &:hover { ... } }是合法的，但[data-type="card"]:hover会被 Less 当作一个整体，&就没意义了 - 如果父选择器是动态生成的（如 Vue 的
v-for渲染类名），嵌套生成的选择器可能根本没匹配到真实 DOM 节点
嵌套 + 循环生成选择器的性能陷阱
用 .each() 或 for 循环配合嵌套，能快速生成 .m-1、.m-2 等工具类，但容易忽略两件事：输出体积和浏览器解析成本。
实际影响：
- 循环 100 次生成 100 个类？CSS 文件可能涨几百 KB，gzip 后仍明显——尤其当每个还带 hover/focus/active 变体时
- Chrome 对单条选择器长度有限制（约 500 字符），嵌套过深+循环叠加容易触发“Invalid CSS selector”警告
- 某些构建工具（如 less-loader v7+）默认关闭循环递归保护，无限嵌套可能卡死编译进程
- 真要用循环，优先用
extract()或函数封装逻辑，而不是把所有变体都展开成独立 CSS 规则
嵌套本身不难，难的是判断哪一层该用 & 拼，哪一层该断开重写；最难的是改完之后，得去 DevTools 里点开 computed styles，看浏览器到底算出了什么选择器权重——这才是最常被跳过的验证步骤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
