直接写 width: var(--sidebar-width) 无效的三大原因是：变量未在 :root 定义、缺单位 px、flex 布局中 width 被 flex-basis 覆盖；验证需看 devtools computed 中 width 是否解析为具体值。
为什么直接写 width: var(--sidebar-width) 没反应
不是语法错，而是变量根本没被浏览器解析出来。最常见三个原因：
— --sidebar-width 定义在 .sidebar 类里，而不是 :root 或布局容器根元素，其他选择器读不到；
— 变量值写成 240 或 240rem，缺单位 px，浏览器静默忽略；
— 父容器是 display: flex，但侧边栏没设 flex: 0 0 auto，此时 width 被 flex-basis 覆盖，变量失效。
验证方法：打开 DevTools → Computed 标签 → 查该元素的 width 值，若显示 var(--sidebar-width) 而非具体像素，说明变量未生效。
用 flex-basis 还是 width 控制收缩
别在 flex-basis 里直接写 var(--sidebar-width) —— CSS 规范不支持，浏览器会忽略。必须改用 width + flex: 0 0 auto 组合：
— 侧边栏： width: var(--sidebar-width, 240px); flex: 0 0 auto;
— 主内容区： flex: 1;（确保它不参与 margin-left 冲突）
如果坚持用 flex-basis 动画，得配 min-width: 0 解除默认最小宽度保护，否则文字或图标会撑开，缩不到目标值；同时初始和目标值都得是具体数值（如 240px → 64px），禁用 auto 或 content。
grid-template-columns 里怎么用变量动态算列宽
不能写 grid-template-columns: var(--sidebar-width) 1fr，必须套 calc()：
— 容器上写：grid-template-columns: calc(var(--sidebar-width) * 1px) 1fr;
— * 1px 是防 Safari 解析失败的硬性补丁，缺它某些旧版会丢掉整个声明
— 初始定义：:root { --sidebar-width: 260px; }
— 收缩时只需改变量：.sidebar-collapsed { --sidebar-width: 64px; }，不用重写整条 grid-template-columns
注意：侧边栏自身要加 overflow: hidden 和 min-width: 0，否则即使宽度为 0，内容仍可能溢出或触发滚动条。
动画卡顿或跳变的根本原因
对 width 做 transition 本身就不稳，尤其两端值类型不一致（比如 240px → auto）时，浏览器无法插值，直接跳变。
更可靠的做法：
— 改用 transform: scaleX() + overflow: hidden，性能好、兼容稳
— 如果必须用 width，确保起点和终点都是带单位的具体数值（240px → 64px），且加 box-sizing: border-box 避免 padding/border 干扰终点宽度
— Safari 旧版本（≤15.6）修改变量后可能不重排，JS 切类后加一行 getComputedStyle(document.documentElement).transform; 强制刷新
变量本身不触发重排，也不参与布局计算——它只是个“占位符”，真正起效靠的是你把它塞进 width、calc() 或 flex-basis（后者需绕过规范限制）。最容易被忽略的，是 min-width: 0 和 overflow: hidden 这两个配套声明，少一个，收缩就卡在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
