响应式侧边栏需用CSS变量驱动calc()，变量须定义在:root或容器根元素、带单位、设fallback；flex-basis不支持变量，应改用width+flex:0 0 auto；grid布局需初始声明含变量的grid-template-columns。
直接用 calc(100% - 240px) 不算响应式——它不随暗色模式、折叠状态或屏幕尺寸动态变。真要响应，必须靠 CSS 变量驱动 calc()，且变量得绑定到具体容器、带单位、有 fallback。
变量必须定义在 :root 或组件根元素上，不能写在 .sidebar 类里
很多人把 --sidebar-width 写在 .sidebar { --sidebar-width: 240px; } 里，结果 width: var(--sidebar-width) 没生效。原因：CSS 变量作用域是声明它的选择器及其后代，但布局计算（如 grid-template-columns）往往发生在父容器，而父容器读不到子元素声明的变量。
-
:root最稳妥，全局可读，适合单页应用主侧边栏 - 多侧边栏共存时（比如嵌套仪表盘），改用容器类：
.dashboard-layout { --sidebar-width: 260px; }，JS 更新也只影响该区域 - 别漏单位：
--sidebar-width: 240px✅，--sidebar-width: 240❌（无单位会被忽略） - 媒体查询中覆盖变量时，必须写在同级或更外层作用域，例如：
@media (max-width: 768px) { .dashboard-layout { --sidebar-width: 0; } }
flex 布局下，别用 flex-basis 直接接 var()，改用 width + flex: 0 0 auto
flex: 0 0 var(--sidebar-width) 在所有主流浏览器里都会被静默忽略——这是 CSS 规范限制，flex-basis 不支持变量解析。强行写只会退回到 auto，导致侧边栏撑满或坍缩。
- 正确写法：
.sidebar { width: var(--sidebar-width, 240px); flex: 0 0 auto; } - 主内容区必须加
min-width: 0，否则长文本或<pre class="brush:php;toolbar:false;"></pre>会撑破布局 - 折叠时，仅设
width: 0不够，还得配overflow: hidden和transition: width 0.3s ease - Safari 旧版可能卡住，JS 修改变量后加一句
getComputedStyle(document.documentElement).transform强制重排
calc() 里混用单位要加 fallback，且避免在 Safari 里裸用 var()
width: calc(var(--sidebar-width) - 20px) 一旦变量未定义，整条声明失效，浏览器直接丢弃——你看到的可能是默认宽度或继承值，很难 debug。
立即学习“前端免费学习笔记（深入）”；
- 始终加 fallback：
calc(var(--sidebar-width, 240px) - 20px) - 某些旧版 Safari 解析
var(--x)失败，可补单位乘法兜底：calc(var(--sidebar-width, 240px) * 1px) - 别嵌套：
var(--sidebar-width, calc(100vw / 4))非法，CSS 不允许calc()出现在var()第二参数 - 调试时看 computed 样式：如果
width显示为initial或空白，说明变量没生效或 fallback 也非法
Grid 布局中，grid-template-columns 必须显式引用变量
只写 .collapsed { --sidebar-width: 0; } 是没用的——变量变了，但 grid-template-columns 规则没重算。浏览器不会自动重新解析已声明的轨道定义。
- 初始定义就得带变量：
grid-template-columns: calc(var(--sidebar-width, 240px) * 1px) 1fr; - 收缩时只需切换类，变量更新后 grid 自动重布局
- 侧边栏宽度归零后仍占位，若内容溢出或有阴影，得额外加
overflow: hidden和pointer-events: none - 别依赖
display: none隐藏——会破坏可访问性，屏幕阅读器跳过，键盘焦点丢失
最常被忽略的是变量更新时机：JS 设置 setProperty 后，DOM 渲染未必立刻完成，紧接着读 offsetWidth 可能拿到旧值。需要 requestAnimationFrame 或强制重排才能确保取到新尺寸。
