SCSS变量在媒体查询中无效，因其是编译时静态值，无法运行时响应；应改用CSS自定义属性（如--sidebar-width）并在:root下定义和覆盖。
为什么直接在 @media 里改 SCSS 变量没用
SCSS 变量是编译时静态值，不是运行时响应式变量。你在 @media 块里写 $sidebar-width: 60px，编译器根本不会执行它——只认最上方第一次定义的值。结果就是：CSS 输出里永远只有初始宽度，媒体查询形同虚设。
- 真正生效的是 CSS 自定义属性（
--sidebar-width），它支持 JS 动态修改和媒体查询覆盖 - SCSS 变量适合生成多套预设断点样式，比如
$sidebar-width-sm: 60px、$sidebar-width-lg: 320px - 若坚持用 SCSS 控制响应式，必须配合类名切换：
.sidebar.is-mobile+ 独立规则块，而非变量重赋值
--sidebar-width 在 flex 布局中为啥不直接用于 flex-basis
规范限制：flex 属性（如 flex: 0 0 var(--sidebar-width)）不支持在 flex-basis 位置解析 CSS 变量。浏览器会静默忽略该值，退回到 auto，导致侧边栏撑满或坍缩异常。
- 正确做法是改用
width: var(--sidebar-width, 240px)+flex: 0 0 auto - 务必为变量提供带单位的 fallback，例如
var(--sidebar-width, 240px)，写成var(--sidebar-width, 240)会失效 - Safari 中动态修改后可能卡住，需强制重排：修改变量后立刻读取
getComputedStyle(el).transform
折叠动画用 width 还是 transform: translateX()
用 width 触发 layout，动画易卡顿；用 translateX() 走合成层，GPU 加速更顺滑——尤其在移动端。但二者适用场景不同，不能混用。
- 抽屉式侧边栏（从屏幕外推入）：用
transform: translateX(-100%) → translateX(0)，配transition: transform 0.3s ease-out - 固定区域缩放（如 240px ↔ 64px）：用
width+overflow: hidden，避免内容溢出；加text-overflow: ellipsis配合窄宽 - 别对同一元素同时过渡
width和transform，可能触发意外重排，动画撕裂
如何让媒体查询和 JS 状态不打架
常见问题：桌面端刷新后侧边栏“闪一下”或卡在半开状态。根源是 JS 设置的内联 style（如 style="width: 64px"）优先级高于媒体查询里的 CSS 规则，导致断点切换时状态丢失。
立即学习“前端免费学习笔记（深入）”；
- 统一用 class 控制显隐态，比如
.sidebar--collapsed，媒体查询只负责默认是否添加该 class - 桌面端媒体查询中写：
@media (min-width: 768px) { .sidebar:not(.sidebar--collapsed) { width: 240px; } } - JS 切换前先检查
window.matchMedia("(min-width: 768px)").matches，避免在桌面模式下调用移动端折叠逻辑
最麻烦的其实是状态同步——CSS 变量本身不带“已展开”语义，得靠 class 或属性标记来桥接 JS 与样式，否则 resize 或主题切换时极易脱节。
