CSS变量须以--开头并声明在:root等作用域内，值需带单位才能参与calc()运算，且calc中单位须兼容；媒体查询不可用var()，变量无逻辑能力，动态效果需JS配合。
如何在CSS中正确声明和使用 -- 开头的自定义属性（CSS变量）
CSS变量必须声明在 :root 或某个选择器作用域内，且名称必须以 -- 开头，比如 --primary-color。浏览器不会把没加双短横线的名称当变量——写成 primary-color 或 $color 都无效。
常见错误是把变量写在普通类里却期望全局生效，或者漏掉冒号前的双短横线。另外，变量值不能直接参与计算，必须配合 calc() 使用。
-
:root是最常用的作用域，确保变量可被整个文档访问 - 变量值支持数字、颜色、长度单位等，但字符串（如
"16px"）会被当作无效值处理 - 变量可以被 JavaScript 读写：
getComputedStyle(document.documentElement).getPropertyValue('--gap')
为什么 calc(var(--size) * 2) 会报错？必须加单位
因为 var(--size) 展开后若不含单位（比如你设了 --size: 16），它就是一个纯数字，而 CSS 中不允许无单位数值参与乘除运算——calc(16 * 2) 合法，但 calc(16px * 2) 才是预期行为；如果变量本身没单位，calc 就无法推导结果单位，直接失效。
正确做法是：变量值自带单位，或在 calc 内显式补上。下面两种都可行：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 推荐：变量自带单位 */
:root {
--base-size: 16px;
}
.text { font-size: calc(var(--base-size) * 1.25); }
<p>/<em> ✅ 可行但易错：在 calc 里补单位（仅限加减）</em>/
.text { font-size: calc(var(--base-size-number) <em> 1.25 + 0px); }
/</em> 注意：+ 0px 是 hack，不推荐用于乘除场景 */
calc() 和 var() 混用时的单位兼容性陷阱
CSS 要求 calc() 中参与运算的每个值，其单位必须能相互转换或兼容。比如 px 和 rem 可混合，但 px 和 deg 不行；百分比在某些上下文中（如 width）可参与计算，在 font-size 中则可能被忽略。
- 不能写
calc(var(--width) + var(--height))，除非两个变量单位一致（如都是px） - 不能在
transform: translateX(calc(var(--offset) * -1))中用无单位变量，否则位移失效 - 媒体查询中不能用
var()，@media (min-width: calc(var(--breakpoint) + 1px))是无效语法
实际项目中建议的变量组织方式
别把所有数值都塞进变量然后疯狂套 calc。优先用语义化命名，按用途分组，并控制嵌套层级。比如响应式间距系统，可以这样设计：
:root {
--space-unit: 4px; /* 基础单位，带单位 */
--space-xs: calc(var(--space-unit) * 2); /* 8px */
--space-sm: calc(var(--space-unit) * 4); /* 16px */
--space-md: calc(var(--space-unit) * 6); /* 24px */
--space-lg: calc(var(--space-unit) * 12); /* 48px */
}
.card { padding: var(--space-md) var(--space-lg); }这种写法清晰、可维护，也避开了运行时反复解析 calc(var(...) * ...) 的潜在性能波动（虽然现代浏览器优化得很好，但深层嵌套仍可能触发重算）。
真正容易被忽略的是：变量作用域继承机制和 calc 的静态解析特性——它们不支持条件逻辑、循环或函数调用，所有“动态”效果都得靠 JS 配合或预设多套变量方案来实现。
