应统一用 px 定义侧边栏宽度变量，calc() 中复用；响应式优先用 clamp()；flex 布局需显式设侧边栏 flex: 0 0 $w 与主内容区 flex: 1；grid 更可靠；避免 sass 函数返回 calc 字符串用于变量赋值；隐藏侧边栏时须同步移除其文档流占位。
侧边栏宽度用 calc() 动态减去，但必须避开 em / rem 混合单位报错
直接写 calc(100% - 240px) 没问题，但一旦侧边栏用 rem（比如 15rem），calc(100% - 15rem) 在部分旧版 Safari 或某些构建工具中会编译失败或运行时失效。Sass 本身不解析 calc()，它只是字符串拼接，所以关键在「传给 calc() 的值必须是同类型单位，或纯数字+单位组合」。
实操建议：
- 统一用
px定义侧边栏基准宽度（如$sidebar-width: 240px），再在calc()中复用 —— 最稳 - 若必须响应式缩放，用
clamp()替代多层@media：例如width: clamp(64px, 12vw, 240px)，再让主内容区calc(100% - clamp(...))（现代浏览器支持良好） - 避免在
calc()内做 Sass 运算，比如calc(100% - $sidebar-width * 0.8)—— Sass 会先计算出192px，再拼进字符串，看似可行，但可读性差且难调试
Sass 变量 + @media 切换侧边栏宽度时，主内容区不能只靠 flex: 1
很多人以为给主内容区设 flex: 1 就能自动占满剩余空间，但前提是父容器是 display: flex 且侧边栏有明确宽度（非 flex 自适应）。一旦侧边栏在 @media 里从 240px 变成 64px，而主内容区没重置 min-width 或 flex-basis，可能出现换行、挤压或滚动条闪现。
实操建议：
- 侧边栏和主内容区都用
flex布局，侧边栏加flex: 0 0 $sidebar-width，主内容区用flex: 1—— 这样宽度变化时 flex 引擎会重新分配 - 在每个断点里显式重设主内容区的
flex-basis，例如：@media (max-width: 768px) {<br> .sidebar { flex: 0 0 64px; }<br> .main { flex-basis: calc(100% - 64px); }<br>} - 如果用 CSS Grid，更推荐：父容器设
grid-template-columns: [sidebar-start] $sidebar-width [sidebar-end main-start] 1fr [main-end]，然后用@media覆盖$sidebar-width变量值 —— Grid 的列轨道天然响应
用 Sass @function 封装剩余宽度计算，但别返回带单位的字符串
有人写 @function sidebar-remaining() { @return calc(100% - #{$sidebar-width}); }，然后在样式里写 width: sidebar-remaining(); —— 看似简洁，但函数返回的是字符串，无法被后续 Sass 运算消费，也容易漏掉空格导致 calc(100%-240px)（缺少空格会失效）。
实操建议：
- 函数只负责生成安全的
calc()字符串，且强制加空格：@function calc-remaining($side-width) { @return calc(100% - #{$side-width}); } - 调用时必须包裹在属性值里，不能用于变量赋值：
.main { width: calc-remaining($sidebar-width); }✔️$main-width: calc-remaining($sidebar-width);❌（$main-width 成了字符串，后面没法参与其他计算） - 更实用的做法是把宽度逻辑下沉到 mixin：
@mixin layout-main($sidebar-width) { width: calc(100% - #{$sidebar-width}); }，调用清晰、作用域明确
移动端折叠侧边栏后，主内容区宽度计算要防“视觉残留”
当侧边栏用 transform: translateX(-100%) 隐藏，而非 display: none 或 width: 0，它的 DOM 仍占据文档流位置 —— 此时 calc(100% - 240px) 依然生效，主内容区会被压窄，造成右侧留白或内容错位。
实操建议：
- 隐藏侧边栏时，同步改其
flex-basis或grid-column，而不是只靠 transform - 用布尔类名控制布局，比如
.layout--sidebar-collapsed，并在该类下重置父容器的 grid 模板或 flex 子项：.layout--sidebar-collapsed .main { grid-column: 1 / -1; } - 如果必须用 transform，记得加
visibility: hidden和pointer-events: none，并用 JS 同步移除其占位影响（例如临时设width: 0; overflow: hidden）
真正卡住人的往往不是 calc() 语法，而是单位混用时 Sass 编译无报错、浏览器运行时报无效值，或者 flex 分配在断点切换瞬间没触发重排。动手前先确认侧边栏是否脱离文档流、主内容区的父容器 display 类型、以及你用的构建工具对 calc() 字符串的处理策略。
