用scss变量统一断点与尺寸，@mixin封装flex基础样式，@media用max-width实现从大到小适配，折叠动画用max-height+overflow隐藏并过渡，确保min-width:0全覆盖防safari错位。
直接用 SCSS 写响应式导航栏，核心不是套模板，而是把 Flexbox 的可变性 + SCSS 的变量/嵌套能力焊死在结构里。否则写一堆 @media 和重复的 flex 声明，改一个断点就得全局搜。
怎么用 SCSS 变量统一控制导航宽度与折叠临界点
别把断点值硬写进每个 @media 里。用一个变量收口，后续调整只改一处：
-
$nav-breakpoint: 768px—— 这是默认断点，但实际应按内容撑开宽度来定（比如导航项文字多，可能 580px 就换行了） -
$nav-sidebar-width: 240px和$nav-sidebar-collapsed-width: 60px—— 侧边栏展开/折叠宽度，后续 JS 只需改 CSS 变量，不用操作 class - 在
:root里注入：:root { --sidebar-width: #{$nav-sidebar-width}; }，确保 JS 能读取
为什么用 @mixin 封装 flex 导航基础样式比重复写更稳
每次写 display: flex; align-items: center; list-style: none; 不仅啰嗦，还容易漏掉关键项（比如 min-width: 0 导致 Safari 撑开）。封装后：
- 统一处理
flex-wrap: wrap+justify-content: space-between+align-items: center - 自动给每个
> li加flex-shrink: 0，防小屏被压缩变形 - 内嵌
a标签默认加white-space: nowrap和text-decoration: none，避免文字断行错位 - 调用时只需：
@include nav-flex-base();，不用再记哪几行不能少
@media 断点里该写 max-width 还是 min-width
写 max-width。因为响应式逻辑是从大到小适配，桌面端是完整状态，移动端是降级状态。如果用 min-width，容易出现：
- 小屏设备加载完 CSS 后，先渲染桌面规则，再被
@media (min-width: ...)覆盖，闪一下 - 某些旧版 Safari 对
min-width媒体查询解析延迟，导致初始布局错乱 - 折叠菜单的
.nav-list在max-width下设display: none，语义和可访问性可控；而min-width下隐藏，反而要额外写 desktop 回退规则
折叠动画为什么用 max-height 而不是 height 或 display
height: auto 无法 transition，display: none 会切断 DOM 流、屏幕阅读器跳过、JS 焦点管理失效。所以必须绕开：
- 设
max-height: 0+overflow: hidden实现“视觉隐藏” - 展开时设
max-height: 500px（足够覆盖最多 8 个菜单项的高度），而非auto - 配合
transition: max-height 0.3s ease-in-out，比 JS 控制transform更轻量、更易测 - 注意：这个值不能太小（否则动画中途截断），也不能太大（否则收起时有延迟感），实测 400–600px 最稳
真正难的不是写出来，是让 flex-basis 动画和 max-height 过渡不打架，以及确保 min-width: 0 落在每一层容器上——漏一层，Safari 就可能把整个导航栏压成一条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
