flex-basis 不支持 css 变量，需用 width + flex 组合实现；calc() 中 var() 必须带 fallback 单位；变量应定义在父容器或 :root；width/min-width 动画失效时改用 flex-basis 或 transform。
为什么直接写 flex-basis: var(--sidebar-width) 不生效
这是最常踩的坑：CSS 规范明确禁止在 flex-basis 中使用变量，所有主流浏览器都会静默忽略该声明，退回到 auto。结果就是侧边栏要么撑满、要么坍缩，完全不响应变量变化。
正确做法是拆开处理：width 负责接收变量，flex 控制弹性行为：
-
width: var(--sidebar-width, 240px)—— 变量带单位、有 fallback -
flex: 0 0 auto—— 禁止拉伸压缩，让 width 主导尺寸 - 主内容区必须加
min-width: 0，否则长文本会撑破布局
calc() 里用 var() 怎么避免整条样式失效
一旦 var(--sidebar-width) 未定义或无单位，calc(var(--sidebar-width) - 20px) 整条声明会被浏览器丢弃，你看到的可能是默认宽度，很难定位问题。
必须加 fallback 并兜底单位解析：
- 写成
calc(var(--sidebar-width, 240px) - 20px)，fallback 保证降级可用 - 旧版 Safari 可能解析失败，改用
calc(var(--sidebar-width, 240px) * 1px)更稳妥 - 禁止嵌套：
var(--sidebar-width, calc(100vw / 4))是非法语法，CSS 不允许
变量该定义在哪儿？为什么写在 .sidebar 里没用
CSS 变量作用域是声明它的选择器及其后代。把 --sidebar-width 写在 .sidebar { --sidebar-width: 240px; } 里，父容器（比如 flex 容器或 grid 容器）根本读不到这个变量——而布局计算恰恰发生在父级。
解决方案分场景：
- 单页主侧边栏：定义在
:root，全局可读，最稳妥 - 多嵌套仪表盘：用容器类，如
.dashboard-layout { --sidebar-width: 260px; }，JS 更新也只影响该区域 - 折叠状态切换：用
.sidebar.is-collapsed { --sidebar-width: 48px; }，但确保 class 确实被 toggle，且没有更高优先级的width声明盖掉它
折叠动画卡顿或跳变，怎么选可动画属性
width 和 min-width 在值为 auto 或百分比时，浏览器无法插值，动画必然失效或跳变。
两个可靠方案：
- 用
flex-basis+min-width: 0+overflow: hidden：折叠时设flex-basis: 0，展开时恢复变量值，flex-basis是可动画属性 - 用
transform: scaleX()替代width：性能更好，视觉等效，写transition: transform 0.3s ease即可 - 别忘了触发重排：JS 修改变量后，加一句
getComputedStyle(document.documentElement).transform强制刷新，尤其 Safari 旧版容易卡住
实际调试时，如果 computed 样式里 width 显示为 initial 或空白，基本就是变量作用域或单位缺失的问题——不是代码写错，而是变量根本没被读到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
