less不支持原生循环，所谓“循环”必须用递归mixin+守卫条件（如when (@n > 0)）实现，否则会报错、静默忽略或无限递归；需控制层级≤10，且less 4.0+才支持列表遍历等高级功能。
Less 里用循环生成嵌套选择器为什么不起作用？
Less 本身不支持原生 for 循环，.each() 或 for (i in ...) 这类写法在 Less 中直接报错或被忽略。你写的“循环”大概率被编译器当普通 CSS 输出，或者根本没展开——因为 Less 的循环必须依赖递归 mixin + 保护条件（guard），且层级深度需预先可控。
常见错误现象：Cannot parse inline javascript（误用了 JS 语法）、生成的 CSS 完全没嵌套、只输出了第一层、或编译卡死（递归没终止）。
- Less 的「循环」本质是递归 mixin 调用，不是运行时逻辑
- 必须用
when (@n > 0)这类守卫控制递归出口，否则无限展开 - 层级深度建议限制在 10 层以内，否则编译慢、CSS 体积膨胀明显
用递归 mixin 实现 .menu-level-1 → .menu-level-5 的自动展开
这是最稳定、兼容性最好的方式。核心是定义一个带计数器的 mixin，在每次调用时生成当前层级选择器，并递归调用自身减一。
.generate-menu-levels(@n, @base: menu) when (@n > 0) {
.@{base}-level-@{n} {
// 这里放通用样式，比如 padding-left: (@n * 16px);
}
// 递归调用，直到 @n // 启动：生成 level-1 到 level-5
.generate-menu-levels(5);
注意：@base 参数用于复用（比如换成 sidebar），@{n} 必须参与选择器拼接，否则 Less 不会把它当作变量插值；when (@n > 0) 缺失会导致编译失败或无限递归。
想动态拼接多层嵌套选择器（如 .a .b .c .d）怎么办？
这种「路径式嵌套」不能靠递归 mixin 简单解决，因为每层 selector 名称不同，需要传入列表。Less 提供 extract() 和 length() 配合递归，但更实用的是用预定义列表 + each()（仅 Less 4.0+ 支持）：
.nested-selectors(@list) when (islist(@list)) and (length(@list) > 0) {
@item: extract(@list, 1);
@rest: slice(@list, 2);
<p>@{item} {
// 如果还有剩余项，继续嵌套
.nested-selectors(@rest);
}
}</p><p>// 使用：
.nested-selectors([.header, .nav, .item, .link]);</p>
⚠️ 注意：slice() 在 Less 3.x 不可用，必须升级到 4.x；extract() 索引从 1 开始；如果传入非列表（比如字符串），islist() 守卫会跳过，导致无声失败。
为什么不用 JavaScript 插件或外部工具？
Less 官方插件机制（plugin）理论上能注入 JS 逻辑，但实际项目中极少采用：构建链路变复杂、缓存失效难调试、CI/CD 环境容易缺失依赖。而 Webpack 的 less-loader 也不默认启用插件支持。
更现实的替代路径：
- 简单场景：直接手写 3–5 层，比写递归 mixin 更快更易读
- 复杂动态结构（如 CMS 导航深度不可控）：把嵌套逻辑移到 JS 运行时，用 class 切换代替 CSS 层级，CSS 只保留原子类（如
.indent-1,.indent-2） - 长期维护项目：考虑迁移到 Sass（
@for更直观）或 CSS-in-JS（如 styled-components 的 props 动态）
递归 mixin 看似灵活，但每次修改层级都要改调用参数和守卫条件，真正容易被忽略的是：它把「结构逻辑」耦合进了样式文件，而样式本该专注呈现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
