多级导航菜单HTML须语义化嵌套，子菜单作为父的最后一个子节点内嵌；SCSS递归宏需设$depth参数并限制最大6级防爆栈；各层级样式依$depth差异化生成；移动端通过.nav-item--expanded类协同JS控制显隐，不破坏递归结构。
多级导航菜单的HTML结构怎么组织才利于SCSS递归？
必须用语义化嵌套 的最后一个子节点——不是追加在外部，而是内嵌。否则 SCSS 无法通过 & > ul 精准捕获层级关系。
常见错误是把二级菜单写成同级
SCSS递归混合宏（@mixin）怎么写才不爆栈？
递归深度必须显式限制，默认最多支持 6 级已足够；不设上限可能触发编译器栈溢出（Sass 会报 Stack level too deep）。关键点是用参数控制层级，并在基础层退出。
实操建议：
- 定义混合宏时带一个
$depth参数，默认值设为1 - 每递归一级，
$depth加1，当$depth > 6时直接@return退出 - 子菜单样式只作用于
& > ul，避免误选中深层嵌套的非直系ul - 用
@include nav-submenu($depth + 1)实现下一级调用
如何让不同层级菜单显示行为差异化？
纯 CSS 没法动态读取嵌套深度，但 SCSS 递归宏可以基于 $depth 值生成不同规则。比如：
- 一级菜单横向排列：
display: flex，二级起垂直展开 - 每深一级，
left偏移增加100%（实现向右逐级缩进） - 三级及以上菜单默认隐藏，仅在父级
:hover时显示（需配合position: absolute和visibility: hidden） - 用
opacity和transform: scaleY(0)做渐变展开动画，但注意transform-origin: top才能从顶部展开
移动端折叠菜单和递归样式怎么共存？
递归生成的样式默认作用于所有视口，但移动端需要把多级菜单收拢成汉堡菜单+点击展开。不能靠 media query 简单覆盖，否则递归逻辑会被打断。
正确做法是：保持递归结构不变，只改变触发方式和可见性策略：
- PC 端用
:hover显示子菜单；移动端改用.nav-item--expanded > ul类控制显隐 - JavaScript 只负责切换
nav-item--expanded类，不操作 DOM 结构 - SCSS 中对
.nav-item--expanded > ul单独写一套展开逻辑，与递归宏并列，不嵌套在@mixin nav-submenu内 - 确保移动端的
ul仍保有position: absolute和top: 100%，否则点击展开后位置错乱
递归本身不处理交互逻辑，它只管样式生成；交互响应必须由 JS 和额外的 class 规则协同完成——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
