如何使用SCSS递归函数生成多级嵌套折叠菜单的缩进CSS-css教程-PHP中文网

SCSS不支持递归函数，所谓“递归生成”实为手动分层+@each嵌套；应使用@mixin配合显式层级参数控制缩进，并通过CSS选择器而非DOM深度匹配，同时缩进与折叠逻辑必须解耦。

如何使用scss递归函数生成多级嵌套折叠菜单的缩进css

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);
}</p>

不要用 margin-left：它在 RTL 场景下失效，且与 text-align 冲突
优先用 margin-inline-start 替代 padding-left，兼容 LTR/RTL
calc() 中的变量必须声明在 :root 或通过 !default 提供 fallback

为什么不能靠 DOM 深度自动推导缩进

Element UI 的 DOM 结构中，.el-menu--inline 不是严格按“每级一个”的方式嵌套。比如某些场景下二级菜单容器可能被包裹在

 里，导致选择器匹配断裂；或者主题包动态插入 wrapper 节点，破坏原有层级路径。更关键的是：CSS 选择器特异性（specificity）会让简单覆盖失效。你写 .el-menu-item { padding-left: 32px }，根本不会影响到二级项，因为默认规则是 .el-menu .el-menu--inline .el-menu-item，特异性更高。

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										

显式加 .menu-root 类限定作用域，避免污染全局样式
所有缩进规则必须基于 class 层级，而非 DOM 层级（即不依赖 ul ul ul 这类后代选择器）
如果项目需支持主题切换，把 --menu-indent-step 放进 :root，而非 SCSS 变量

多级折叠菜单的 display 控制别碰 visibility 或 opacity

纯 CSS 折叠菜单（ + :checked ~ .submenu）必须用 display: none/block 切换，否则会导致焦点不可达、屏幕阅读器跳过、键盘 tab 顺序混乱。
常见错误：为“动画更顺”改用 visibility: hidden + transition: opacity，结果子菜单始终占据布局空间，鼠标悬停区域错位，移动端点击失效。


max-height: 0 + overflow: hidden 是更安全的过渡方案（参考折叠面板原理）
若必须动画，设 max-height: 500px（足够容纳最多行内容），不要用 max-height: 100%（无效）
每一级 .submenu 必须紧跟其 ，中间不能有空格、换行或 ，否则 ~ 兄弟选择器失效实际工程中最容易被忽略的一点：缩进逻辑和折叠显隐逻辑必须解耦。前者靠 CSS class 层级 + margin-inline-start 实现，后者靠 input:checked ~ .submenu 控制 display。混在一起写（比如在 @each 循环里同时输出缩进和显隐规则）会让调试成本指数上升——改一个值，两个行为全崩。