width: var(--nav-width) 有效需满足三条件：变量带单位（如240px）、定义在:root或根元素、不与flex-basis冲突；否则浏览器静默忽略，devtools中computed值仍显示var()即未生效。
直接用 width: var(--nav-width) 控制侧边栏宽度 + margin-left 同步主内容区位移，是可行的，但必须满足三个硬性条件：变量带单位、作用域正确、不与 flex-basis 冲突；否则浏览器会静默忽略，动画也不触发。
为什么 width: var(--nav-width) 有时完全没反应
不是写错了，是 CSS 变量未被真正解析——最常见原因有三个：
-
--nav-width定义在局部类（如.sidebar）里，而非:root或组件根元素，导致其他选择器读不到 - 变量值写成
240或240rem（单位错），必须是240px这种完整单位形式 - 父容器用了
display: flex且子项没设flex: 0 0 auto，此时width被flex-basis覆盖，变量失效
验证方法：打开 DevTools，在 computed 标签下查该元素的 width 值，若显示 var(--nav-width) 而非具体像素，说明变量未生效。
如何让 content 的 margin-left 真正响应变量变化
不能只靠兄弟选择器（如 .sidebar.collapsed + .content）硬编码数值，那样就失去变量意义。正确做法是用同一变量驱动两边：
- 侧边栏：
width: var(--nav-width, 240px); flex: 0 0 auto; - 主内容区：
margin-left: var(--nav-width, 240px);（前提是它不参与 flex/grid 布局） - 如果主内容区在 flex 容器中，改用
flex: 1+ 侧边栏flex: 0 0 auto，避免margin-left与flex冲突
注意：Safari 旧版本（≤15.6）对变量更新后不重排，可加一行 JS 强制刷新：getComputedStyle(document.documentElement).transform;
transition 动画卡顿或跳变的根本原因
width 动画本身没问题，但一旦涉及 auto、fit-content、百分比或无单位数字，浏览器无法插值，就会跳变或不动。
- 两端值必须都是具体长度单位，比如
240px → 64px，禁用width: 0配合overflow: hidden（视觉上等效但更稳） - 别同时写
flex: 1和width，二者冲突，优先级取决于 display 类型，容易意外覆盖 - 性能更优方案：用
transform: scaleX()替代width，配合overflow: hidden，动画帧率更稳定
过渡声明必须明确写在基础样式里：transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out;，不能只写在 .collapsed 类中。
移动端图标模式下热区不足的隐藏风险
侧边栏缩到 48px 后，图标按钮实际尺寸可能只有 24×24px，远低于推荐的 44×44px 触控最小尺寸。
- 别只缩容器，给图标外层加
padding: 12px，或用::before伪元素扩展点击区域 - 确保文字隐藏时，DOM 仍存在（不要用
display: none），否则键盘焦点和屏幕阅读器会跳过 - 折叠状态建议用
width: var(--nav-width, 64px); overflow: hidden; text-overflow: ellipsis;，保留可访问性
变量驱动收缩看着灵活，但真正在意可访问性、触控精度和 Safari 兼容性时，很多“自动”逻辑得手动补全——这不是配置问题，是 CSS 变量在布局链路中的天然断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
