sass 变量统一管理侧边栏断点与尺寸，如 $sidebar-breakpoint: 48em、$sidebar-width: 240px；封装 @mixin sidebar-layout 处理 flex-shrink: 0、box-sizing: border-box 和 min-width: 0；媒体查询集中于 @mixin responsive-sidebar；折叠动画用 transform + opacity 替代 width。
用 Sass 变量统一管理侧边栏断点与尺寸
硬写 768px 或 max-width: 768px 在多个地方，改一次就得全局搜索替换。Sass 的价值就在这里：把断点、宽度、折叠后尺寸全收进变量，一处定义，多处引用。
关键不是“写得少”，而是“改得准”。比如：
-
$sidebar-breakpoint: 48em—— 用em而非像素，适配用户系统字体缩放 -
$sidebar-width: 240px和$sidebar-collapsed-width: 64px—— 展开/折叠状态的基准宽度 -
:root { --sidebar-width: #{$sidebar-width}; }—— 同时注入 CSS 变量，供 JS 动态读取或动画控制
封装 @mixin sidebar-layout 避免重复 flex 声明
每次写 display: flex; flex-shrink: 0; box-sizing: border-box; 不仅啰嗦，还容易漏掉 min-width: 0——这在 Safari 中会导致侧边栏撑破容器，尤其内部有长文本或图标时。
一个稳妥的 mixin 应该默认处理这些细节：
- 显式声明
flex-shrink: 0，防止主内容变窄时侧边栏被压缩 - 强制
box-sizing: border-box，让 padding/border 不影响 flex-basis 计算 - 加
min-width: 0，避免子元素（如带white-space: nowrap的文字）破坏 flex 布局 - 不直接设
width，而是用flex: 0 0 $sidebar-width，更符合 flex 流程
媒体查询逻辑应集中于 @mixin responsive-sidebar
别把 @media 散落在各个选择器里。Sass 支持嵌套媒体查询，但更推荐抽成独立 mixin，按设备意图组织，而非按像素值堆砌。
例如：
-
@include responsive-sidebar(tablet) { ... }对应max-width: 48em，隐藏文字保留图标 -
@include responsive-sidebar(mobile) { ... }对应max-width: 32em，完全隐藏侧边栏，只留汉堡按钮 - 每个分支内统一控制
.sidebar-item span的max-width、opacity和margin-left，而不是靠display: none粗暴隐藏
这样改断点时，只需调整 mixin 内部的条件，不用翻遍整个样式表找 @media。
折叠动画慎用 width，优先走 transform + opacity
用 width: 0 → width: 240px 做折叠动画，会触发浏览器 Layout，卡顿明显，尤其在低端 Android 设备上。
真正轻量的做法是：
- 初始状态设
transform: translateX(-100%)+opacity: 0 - 展开时只改这两个属性，并配
transition: transform 0.3s ease, opacity 0.2s ease -
transform走合成层，不触发布局重排，iOS/Safari 下也稳 - 记得给
body加overflow: hidden（JS 控制），否则滑出后背景仍可滚动
折叠时文字消失不是靠删 DOM，而是靠 max-width: 0 + overflow: hidden + white-space: nowrap 协同压制——这点最容易被当成“小问题”忽略，结果在高缩放比或大字体设置下文字突然撑开侧边栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
