less不支持原生嵌套的扁平化输出，其嵌套默认生成层级选择器；需用&拼接（无空格）实现并列类名如.btn.modifier，或用mixin显式定义变体以避免冗余和权重问题。
Less 本身不支持原生嵌套语法的扁平化输出
Less 的嵌套写法（如 &、&:hover）在编译后默认生成的是带层级关系的选择器，比如 .btn .btn-text 或 .btn:hover。它没有像 CSS Native Nesting（& 在 CSS 中配合 @nest）那样的“扁平输出”控制机制——也就是说，Less 编译器不会把嵌套结构自动“压平”成单层类名组合（如 .btn.btn-text），除非你手动干预。
用 & + 空格拼接实现视觉上的“扁平选择器”
Less 的 & 代表父选择器，但要注意：它拼接时是否加空格，直接决定输出是嵌套还是并列：
-
&.modifier→ 输出.btn.modifier（无空格 = 并列类，即“扁平”） -
& .child→ 输出.btn .child（有空格 = 后代选择器，非扁平） - 想让
.btn下的span变成.btn span，就写& span；想让它变成.btn-span，就得用插值：.@(selector-replace(&, '.', '-'))-span（需 Less 4+，且非常规）
常见误用：&:hover 看似“扁平”，实则输出 .btn:hover，这是合法伪类，不是多个类并列——它和 .btn.hover 语义完全不同，不能混为一谈。
避免依赖嵌套来生成复合类名，改用 mixin + 参数控制
真正需要“扁平类名组合”（如 .card--large、.btn.is-disabled）时，Less 嵌套不是合适工具。应该用 .mixin() 显式声明变体：
.btn() {
padding: 8px 16px;
}
.btn.is-disabled() {
opacity: 0.5;
cursor: not-allowed;
}
// 调用
.btn();
.btn.is-disabled();
这样输出就是干净的 .btn.is-disabled，无额外空格，也无意外层级。比靠 & 拼接更可控，也更容易被 IDE 和 lint 工具识别。
编译后选择器爆炸？检查嵌套深度与作用域泄漏
Less 嵌套容易导致输出冗余，比如：
.component {
&__header { &--sticky { position: sticky; } }
}
会输出 .component__header--sticky，看似扁平，但若在多层嵌套中重复使用 &，可能意外产出类似 .page .component .component__header--sticky 这样的长链——这不是“扁平”，而是选择器膨胀。关键点：
- 每级
&都继承外层所有祖先选择器，除非用@{variable}手动截断 - 推荐对 BEM 类型结构用独立顶层声明，而非深度嵌套：
.component__header--sticky单独写，不套在.component里 - Less 无
@nest或:where()这类 CSS 新特性，无法规避权重或做作用域隔离
所谓“扁平输出”，本质是控制选择器结构粒度；Less 的能力边界在这里很清晰：它能拼，但不智能，得靠人盯住每一处 & 的空格和上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
