var()本身不参与计算，必须配合calc()才能做加减乘除；直接写var(--gap) * 2会完全失效，连fallback都不触发，因为var()只是字符串替换，calc()才是唯一支持运算的css函数。
var() 本身不参与计算，必须配合 calc() 才能做加减乘除；直接写 var(--gap) * 2 会完全失效，连 fallback 都不触发。
var() 不能单独用于数学运算
CSS 中的 var() 只是值替换，不是表达式求值函数。它展开后就是原始字符串，比如 var(--gap) 展开为 12px，但 12px * 2 在 CSS 语法里非法，整个声明会被浏览器静默丢弃。
- 错误写法：
width: var(--size) * 2;→ 整条规则失效，开发者工具里显示 strike-through - 正确写法：
width: calc(var(--size) * 2);→ 必须包在calc()里 -
calc()内部支持+、-、*、/，但操作数类型必须匹配：单位只能和单位运算（10px + 5px），数字只能和数字运算（2 * 3）
复合选择器中引用变量要小心作用域覆盖
当在 .card:hover 或 .theme-dark .button 这类复合选择器里用 var()，实际取值取决于当前元素是否定义了该变量，或其祖先是否定义了同名变量——CSS 变量按层叠规则继承，不是“就近查找”。
- 如果
:root定义了--bg: #fff，而.card又写了--bg: #f0f0f0，那么.card:hover里的var(--bg)取的是#f0f0f0，不是#fff - 伪类（如
:hover）本身不能声明变量，只能继承或通过 JS 动态改父元素的style.setProperty - 想让悬停时颜色变深？别在
:hover里试图重定义变量，而是提前在:root或组件根上定义好--bg-hover，再用.card:hover { background: var(--bg-hover); }
动态计算常踩的单位陷阱
变量值必须自带单位，否则 calc() 无法安全运算。把数字和单位拆开存是常见错误源头。
- 危险定义：
--gap: 12;→ 后续calc(var(--gap) * 2px)不合法，2px不能乘数字 - 安全定义：
--gap: 12px;→calc(var(--gap) * 2)得到24px，或calc(var(--gap) + 4px)得到16px - 数值型变量（如列数）可单独存：
--col: 4;，然后用于grid-template-columns: repeat(var(--col), 1fr);，但注意repeat()是 CSS 函数，不依赖calc()
真正难的不是写对语法，而是理清「哪里定义」「谁在继承」「何时更新」三层关系。一个变量在 :root 被设为 16px，又被某个组件的 style 属性临时改成 20px，再被另一个 calc() 表达式读取——这时候你得打开 DevTools 的 Computed 面板，逐层看「custom properties」栏，而不是猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
