SCSS不支持递归函数，所谓“递归生成”实为手动分层+@each嵌套；应使用@mixin配合显式层级参数控制缩进，并通过CSS选择器而非DOM深度匹配，同时缩进与折叠逻辑必须解耦。
SCSS里没有真正的递归函数
SCSS不支持函数调用自身，@function 无法实现递归遍历嵌套 map。你看到的“递归生成”效果，本质是手动分层展开 + @each 嵌套循环。试图写 @function gen-indent($map, $level: 0) 并在里面调用自己，编译会直接报错或静默失败。
常见错误现象：map-get($props, "hover-bg") 返回 null，但没报错；生成的 CSS 缺少二级菜单的 padding-left，只有一级生效。
- 必须把嵌套结构“拍平”成明确层级：外层遍历菜单项，内层遍历其子项属性
- 所有嵌套 map 的键名必须是带引号字符串（如
"level-2"），不能是变量插值 - 用
@if map-has-key($item, "children")判断是否存在子级，而不是依赖深度计数
用 @mixin 模拟层级缩进逻辑
真正可行的是定义一个可复用的 @mixin，配合层级参数控制缩进值，再由外部循环传入深度。Element UI 的 .el-menu--inline 嵌套规则正好可被 CSS 选择器捕获，不需要 JS 计算深度。
示例结构：
立即学习“前端免费学习笔记（深入）”；
$menu-indent-step: 16px !default;
<p>@mixin menu-indent($depth) {
padding-left: calc(var(--menu-indent-step, #{$menu-indent-step}) * #{$depth});
}</p><p>// 一级
.menu-root .el-menu-item,
.menu-root .el-submenu__title {
@include menu-indent(0);
}</p><p>// 二级（.el-menu--inline 直接子级）
.menu-root .el-menu--inline .el-menu-item,
.menu-root .el-menu--inline .el-submenu__title {
@include menu-indent(1);
}</p><p>// 三级（两层 .el-menu--inline 嵌套）
.menu-root .el-menu--inline .el-menu--inline .el-menu-item,
.menu-root .el-menu--inline .el-menu--inline .el-submenu__title {
@include menu-indent(2);
}- 不要用
margin-left：它在 RTL 场景下失效，且与text-align冲突 - 优先用
margin-inline-start替代padding-left，兼容 LTR/RTL -
calc()中的变量必须声明在:root或通过!default提供 fallback
为什么不能靠 DOM 深度自动推导缩进
Element UI 的 DOM 结构中，.el-menu--inline 不是严格按“每级一个”的方式嵌套。比如某些场景下二级菜单容器可能被包裹在 <div> 里，导致选择器匹配断裂；或者主题包动态插入 wrapper 节点，破坏原有层级路径。<p>更关键的是：CSS 选择器特异性（specificity）会让简单覆盖失效。你写 <code>.el-menu-item { padding-left: 32px }，根本不会影响到二级项，因为默认规则是 .el-menu .el-menu--inline .el-menu-item，特异性更高。
- 显式加
.menu-root类限定作用域，避免污染全局样式 - 所有缩进规则必须基于 class 层级，而非 DOM 层级（即不依赖
ul ul ul这类后代选择器） - 如果项目需支持主题切换，把
--menu-indent-step放进:root，而非 SCSS 变量
多级折叠菜单的 display 控制别碰 visibility 或 opacity
纯 CSS 折叠菜单（<input type="checkbox"> + :checked ~ .submenu）必须用 display: none/block 切换，否则会导致焦点不可达、屏幕阅读器跳过、键盘 tab 顺序混乱。
常见错误：为“动画更顺”改用 visibility: hidden + transition: opacity，结果子菜单始终占据布局空间，鼠标悬停区域错位，移动端点击失效。
-
max-height: 0+overflow: hidden是更安全的过渡方案（参考折叠面板原理） - 若必须动画，设
max-height: 500px（足够容纳最多行内容），不要用max-height: 100%（无效） - 每一级
.submenu必须紧跟其<label></label>，中间不能有空格、换行或<div>，否则 <code>~兄弟选择器失效实际工程中最容易被忽略的一点：缩进逻辑和折叠显隐逻辑必须解耦。前者靠 CSS class 层级 +
margin-inline-start实现，后者靠input:checked ~ .submenu控制display。混在一起写（比如在@each循环里同时输出缩进和显隐规则）会让调试成本指数上升——改一个值，两个行为全崩。
