css 的 calc() 不支持 if，但可用 0/1 变量通过乘法模拟布尔逻辑，如 font-weight: calc(400 + var(--is-active) * 300)；需注意单位统一、避免复杂嵌套，优先使用 class 控制高复杂度逻辑。
calc 里不能写 if，但可以用 0/1 开关模拟布尔逻辑
CSS 本身没有条件语句，calc() 也不支持 if 或三元运算符。但你可以把逻辑判断转成数值运算：用 --is-active: 1 表示 true，--is-active: 0 表示 false，再通过乘法控制值的“开启/关闭”。
比如想让元素在激活时加粗、非激活时正常：--is-active: 1 → font-weight: calc(400 + var(--is-active) * 300) → 得到 700--is-active: 0 → 同样式 → 得到 400
关键点：
-
calc()中所有参与运算的值必须是可计算单位（数字、长度、角度等），不能是auto、inherit等关键字 - 开关变量必须是纯数字（建议用
0和1，避免小数精度问题） - 不要试图用
var(--cond) * 100%去切换display或visibility—— 这些属性不接受数值计算结果
用乘法组合多个开关：叠加、互斥与权重控制
单个开关只能二选一，但多个开关相乘或相加能表达更复杂的样式逻辑。例如同时控制“是否启用”和“主题模式”：
:root {
--enabled: 1;
--dark-mode: 1;
--base-color: #333;
--dark-color: #ddd;
}
<p>.my-btn {
/<em> 只有启用且深色模式下才用深色文字 </em>/
color: rgb(
calc(51 + (1 - var(--enabled)) <em> 200),
calc(51 + (1 - var(--enabled)) </em> 200),
calc(51 + var(--enabled) <em> var(--dark-mode) </em> 200)
);
}</p>
常见组合方式：
-
var(--a) * var(--b)：AND 关系（两个都为 1 才生效） -
min(var(--a), var(--b))：CSS 不支持min()用于非clamp()场景，慎用；推荐改用乘法 -
calc(var(--a) + var(--b) - var(--a) * var(--b))：OR 关系（任一为 1 即生效） -
calc(1 - var(--a))：NOT 操作
别在 calc 里混用单位和无单位数
这是最常导致样式失效的错误：calc(10px * var(--scale)) 合法，但 calc(10 * var(--offset)) 如果 --offset 是 2px 就会报错 —— 因为 10 是无单位数，2px 是带单位数，乘法要求两边单位兼容。
安全做法：
- 开关变量统一定义为无单位数字：
--active: 1，不是--active: 1px - 需要单位的地方，显式补上：
width: calc(var(--span) * 1rem)，而不是依赖变量自带单位 - 调试时在 DevTools 里 hover 查看
calc(...)计算结果，如果显示invalid value，八成是单位冲突
性能与兼容性：别在高频动画中滥用 calc + CSS 变量
现代浏览器对 calc() 优化不错，但如果你把开关变量绑定在 :hover 或 @keyframes 中频繁修改，又配合多层嵌套 calc，可能触发重排或降低渲染帧率。
实际建议：
- 开关变量适合用于状态切换（如
.menu--open）、响应式断点适配，不适合每帧更新的动画控制 - Chrome / Firefox / Safari（15.4+）支持良好；Safari 14 及更早版本对
calc()中嵌套var()的解析有 Bug，建议加降级：color: #666; color: calc(...); - 如果逻辑太复杂（比如超过 3 层开关组合），不如拆成多个 class 控制，可读性和维护性更高
真正难的不是写出能跑的 calc 表达式，而是判断什么时候该停手、改用 class 切换 —— 那些靠 5 个乘法硬凑出来的“优雅”，往往第一个被删掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
