calc() 本身不动态，仅运行时单次计算；真正动态依赖变量值变化触发重算，sass变量仅编译期代入，无法响应屏幕或容器变化；需组合sass静态计算与css运行时计算。
calc() 本身不“动态”，它只做一次运行时计算；所谓动态宽度，本质是靠变量值变化触发重算——而 Sass 变量只能在编译期代入，不能响应屏幕或容器变化。真正起作用的，是「Sass 层静态计算 + CSS 层运行时计算」的组合策略。
calc() 里为什么不能直接写 $spacing * 2
Sass 不解析 calc() 内部内容，它只把整个函数当字符串处理。写 width: calc($spacing * 2) 会报错，因为 Sass 语法层根本不允许在 calc() 括号里用变量运算。
- 正确做法是把运算提到 Sass 层：用
#{$spacing * 2}把结果拼进去，如width: calc(#{$spacing * 2} + 1rem) -
$spacing必须带单位（如16px），否则* 2后变成纯数字32，拼进calc()就是calc(32 + 1rem)——单位缺失，CSS 无效 - 如果要混合单位（比如
px + rem），Sass 不自动转换，必须手动统一，否则编译失败
什么时候该用 Sass 计算，什么时候该留给 calc() 运行时算
区分核心在于「是否依赖运行时上下文」：Sass 算的是确定值，calc() 算的是相对值。
- 用 Sass：栅格比例（
percentage(3/12)→25%）、字体缩放系数（$base-font * 1.2）、固定断点下的侧边栏宽度（$sidebar-width-md: 240px） - 用
calc()：剩余空间填充（calc(100% - 240px)）、视口相关尺寸（calc(100vw - 2rem)）、需要随父容器宽变化的偏移（left: calc(50% - 100px)） - 混用典型场景：
.main { width: calc(100% - #{$sidebar-width-md}); }—— Sass 提供固定值，calc()做减法
calc() 在 Flex/Grid 中失效的常见原因
写了 width: calc(100% - 20px) 却没反应？大概率不是 calc() 本身错了，而是布局上下文不满足。
- Flex 项目中，
flex: 1或flex-grow: 1会覆盖width，得显式设flex: none或flex-grow: 0 - Grid 轨道定义里用
calc()（如grid-template-columns: 1fr calc(300px - 2rem)）可行，但若容器自身宽由内容撑开（width: fit-content），百分比基准可能为 0，导致塌陷 - 父容器没设
width或max-width，100%就失去参照，calc(100% - 20px)实际按 0 计算 - 旧版 Safari（15.4 之前）对
rem/em + %混用敏感，字体未加载完成时1em可能取默认值，建议优先用px或vw/vh
用 CSS 自定义属性配合 calc() 的硬性要求
想让宽度随 JS 控制的数量变化（比如 tab 数量），就得用 CSS 变量，但规则比想象中严格。
-
--tab-count必须由 JS 显式设置：el.style.setProperty('--tab-count', tabs.length)，不能指望 Sass 注入 - 变量值必须含单位：写
--gap: 20px✅，写--gap: 20❌ —— 否则calc(100% - var(--gap))变成calc(100% - 20)，语法错误 - 运算符前后必须有空格：
calc(100% - var(--gap))✅，calc(100%-var(--gap))❌（部分浏览器拒解析） - 外层括号不能省：
width: calc((100% - 20px) / var(--tab-count))，否则除法优先级导致结果错误
最易被忽略的一点：Sass 和 calc() 是两套独立系统，一个在构建时执行，一个在渲染时执行。混用时，你得清楚每一处数值是在哪一层生成、以什么单位存在、依赖什么上下文——漏掉任一环，样式就悄无声息地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
