css变量在calc()中必须用var()包裹，裸写如--gap会失效；乘除需无单位数值；避免嵌套calc()，改用中间变量；优先用clamp()替代复杂计算；注意sass单位处理与ie兼容性。
calc() 里直接用 CSS 变量要加 var()，不能裸写
很多人写 calc(--gap * 2)，浏览器直接忽略整条声明——calc() 不认识裸变量名，必须显式包裹成 var(--gap)。这是最常静默失效的错误，控制台不报错，样式就没了。
正确写法示例：
:root {
--gap: 20px;
--scale: 1.5;
}
.element {
width: calc(var(--gap) * 2); /* ✅ 输出 calc(20px * 2) */
font-size: calc(1rem * var(--scale)); /* ✅ 输出 calc(1rem * 1.5) */
}
- 所有变量参与
calc()必须走var(--name)形式 - 乘除运算中，至少一个操作数得是无单位数值（如
--scale: 1.5），否则calc(20px * 20px)会失败 - 单位混用（如
var(--gap) + 1rem）现代浏览器支持，但 IE11 和部分安卓 WebView 会整条丢弃
多层嵌套计算别堆 calc()，用变量拆解更稳
像 calc(calc(100% - var(--gap)) / 3) 这种写法在 Safari 15.4 之前完全不识别，且可读性差、调试困难。浏览器不报错，只是默默跳过。
推荐做法是把中间结果提前定义为新变量：
:root {
--gap: 20px;
--content-width: calc(100% - var(--gap));
}
.sidebar {
width: calc(var(--content-width) / 3);
}
- 避免在
calc()内部再套calc()，尤其涉及响应式布局时 - 用
:root或局部作用域定义中间变量，语义清晰、复用方便 - 如果需要动态切换（比如主题色亮度计算），优先用
hsl(from ...)或color-mix()，比嵌套calc()更可靠
单位不一致时，Sass 编译期和 CSS 运行时行为完全不同
如果你用 Sass 管理变量，注意：$spacing: 16（纯数字）和 $spacing: 16px（带单位）在参与 calc() 拼接时结果天差地别。
Sass 层拼接示例：
$gap: 20px;
$full: 100%;
.element {
width: calc(#{$full} - #{$gap}); /* ✅ 输出 calc(100% - 20px) */
}
-
$gap: 20（无单位）→calc(100% - 20)→ 浏览器报无效值，整条失效 - 加减号前后必须有空格，Sass 插值要显式留空格：
calc(#{$full} - #{$gap})，不是calc(#{$full}-#{$gap}) - 乘除运算中，Sass 无法自动转换单位，
1rem * 20px是非法表达式，编译直接报错
用 clamp() 替代复杂 calc() 组合更安全
当你要实现“最小 20px、首选 5vw、最大 60px”这类逻辑，硬写 calc(max(20px, min(5vw, 60px))) 不仅语法错误（max() 不能直接嵌进 calc()），而且旧版浏览器不支持。
直接上 clamp()：
.section {
padding: clamp(20px, 5vw, 60px);
}
-
clamp(min, preferred, max)是min()+max()的安全组合，2023 年起主流浏览器全覆盖 - 比手写多层
calc()+ 媒体查询更简洁，也避免了单位混用兼容性雷区 - 注意：IE 完全不支持
clamp()，降级方案建议用@supports (padding: clamp(0, 0, 0))包裹，外层写回退值
实际项目中最容易被忽略的是：CSS 变量的继承链和计算时机。变量值可能在运行时被 JS 修改，而 calc() 会实时重算，但某些复杂表达式（比如涉及多个 var() 的除法）在低性能设备上可能触发 layout thrashing。真要高频更新，优先考虑用 CSS 自定义属性控制 class 切换，而不是让浏览器反复解析长 calc() 表达式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
