less不支持真正递归混合，需用带守卫的循环技巧（如.generate-menu-levels(@level)配合@level>0终止条件）模拟三层菜单样式，严格匹配html结构并避免选择器权重失控。
Less 里没有真正的递归混合，得用循环模拟
Less 不支持函数式递归调用混合（比如 .menu-level(@n) 自己再调自己），编译器会报 Recursive call to mixin 错误。所谓“递归混合”实际是靠 .loop() 类型的循环技巧 + 嵌套层级计数实现的——本质是展开而非运行时递归。
常见错误是直接写：.submenu() { .submenu(); }，这会让 Less 编译直接失败。必须把层级控制逻辑显式写成参数递减 + 终止条件。
- 用一个
@level参数表示当前要生成的菜单层级（如 1 表示一级，2 表示二级） - 用
when (@level > 0)守卫条件控制是否继续展开 - 每次调用自身时传入
@level - 1，避免无限循环 - 层级深度建议硬编码上限（如最大到 3），否则容易触发编译器栈限制
三级菜单的结构与选择器嵌套必须严格对应 HTML
Less 混合生成的 CSS 选择器层级，必须和真实 DOM 结构一致，否则样式不生效。典型三级结构是：<ul class="menu"><li><ul class="submenu"><li><ul class="submenu"></ul></li></ul></li></ul>。不能指望混合自动适配任意嵌套方式。
推荐用 BEM 风格固定类名，比如统一用 .menu__item、.menu__submenu，避免依赖 > 或空格选择器的歧义。
- 一级菜单：匹配
.menu > .menu__item - 二级菜单：匹配
.menu__item > .menu__submenu - 三级菜单：匹配
.menu__submenu > .menu__item（注意不是再嵌.menu__submenu） - 若 HTML 是
<ul class="menu"><li><ul><li><ul></ul></li></ul></li></ul>这种无类名嵌套，Less 必须用ul ul ul层级，但可维护性极差，不建议
用带守卫的循环混合生成三级规则
下面是一个可直接复用的三级菜单混合，它只展开三层，每层设置不同 left、top 和 opacity：
.generate-menu-levels(@level: 3) when (@level > 0) {
// 第 @level 层的样式（从 3 往下数）
& when (@level = 3) {
.menu__submenu {
left: 100%;
top: 0;
opacity: 0;
transition: opacity 0.2s;
&.is-open { opacity: 1; }
}
}
& when (@level = 2) {
.menu__item:hover > .menu__submenu,
.menu__item.is-hovered > .menu__submenu {
opacity: 1;
}
}
& when (@level = 1) {
.menu__item {
position: relative;
}
}
<p>// 递归调用下一层（实际是展开）
.generate-menu-levels(@level - 1);
}</p><p>// 调用入口
.menu {
.generate-menu-levels(3);
}</p>
注意：& 在这里代表父选择器，所以 & when (@level = 3) 实际生成的是 .menu .menu__submenu；而 .menu__item:hover > .menu__submenu 是独立选择器，不依赖 &。
- 不要在混合里写
display: none控制显隐——应该由 JS 切换.is-open或.is-hovered类 - 动画属性（如
transition）建议写在最外层或基础类上，避免每层重复 - 如果需要支持键盘导航，纯 CSS hover 效果不够，得额外加
:focus-within规则，不能指望混合自动生成
编译后 CSS 体积和选择器权重容易失控
这种展开式“伪递归”会在编译后生成冗余规则。例如 .generate-menu-levels(3) 可能产出三组几乎一样的 opacity 声明，或重复的 position: relative。更麻烦的是，嵌套过深会导致选择器权重飙升，比如 .menu .menu__item .menu__submenu .menu__item 权重远超 .menu__item--active，覆盖困难。
- 用
autoprefixer或cssnano后处理压缩，但无法消除语义重复 - 关键状态样式（如当前激活项）建议抽成独立类，不放在循环混合里
- 超过三级？别硬撑——CSS 级联深度已逼近可维护极限，该切 JS 控制了
真正难的不是写出三级样式，而是让它们在真实交互中稳定响应 hover、focus、touch、键盘操作，且不和全局样式冲突。混合只是生成工具，逻辑边界得靠人划清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
