css自定义属性不能传参，因其是声明式变量而非运行时函数；var()第二参数仅为静态回退值，仅在变量未定义时生效，动态更新需js setproperty()实现。
CSS 自定义属性本身不接收参数，但可以通过 var() 的第二个参数实现“缺省值传递”，或用嵌套 var() 实现变量链式引用——这常被误称为“传参”，实际是值的回退与复用。
为什么不能像函数那样传参
CSS 自定义属性是声明式变量，不是运行时函数。你写 --theme-color: blue，它就只是个字符串/颜色值；浏览器不会解析括号、不会执行逻辑、也不会根据上下文动态求值。所谓“传参”需求，本质是想在不同场景下复用同一组变量逻辑，比如深色模式下所有 --bg 都变暗，但又不想每个地方都重写一遍值。
常见错误现象：.btn { --size: 12px; font-size: var(--size, 14px); } 看似“传了 12px”，其实只是给 --size 赋了个固定值，var() 第二个参数仅在 --size 未定义时才生效，跟“调用时传参”完全无关。
var() 的第二个参数不是可变参数，而是静态回退值
这个参数只在引用的自定义属性未定义（或值无效）时启用，它不感知 DOM 结构、媒体查询或 JS 状态变化。
- ✅ 正确用法：
color: var(--text-color, #333);—— 当--text-color没被设过，就用#333 - ✅ 嵌套回退：
background: var(--bg, var(--surface, white));—— 逐级 fallback，仍为静态值 - ❌ 错误理解：
var(--color, red)中的red会随主题切换自动更新 —— 不会，它是硬编码字面量 - ⚠️ 性能提示：多层嵌套如
var(--a, var(--b, var(--c, black)))会增加 CSS 解析开销，尤其在大量元素上使用时可见卡顿
真正能“动态传值”的只有 JavaScript + setProperty()
如果需要根据用户操作、设备特性或 API 响应实时更新变量值，必须靠 JS 主动设置，CSS 本身没有运行时参数机制。
例如切换主题：
document.documentElement.style.setProperty('--primary', '#5e35b1');
document.documentElement.style.setProperty('--on-primary', 'white');
这时所有 var(--primary) 引用会立即响应。但注意：
- 不能在内联
style属性里直接写style="--primary: #5e35b1"—— 浏览器不识别这种写法，会忽略 - 作用域必须匹配：用
document.documentElement设置才能全局生效；用某个element.style.setProperty()只影响该元素及其后代 - 值必须是合法 CSS 值：传
'100%'可以，传'100%' + unit字符串拼接（没计算）会导致var()失效
attr() 和自定义属性是两套完全不兼容的机制
有人混淆 HTML 的 data- 属性和 CSS 自定义属性。它们之间不能互通：
-
attr(data-theme)只能在伪元素::before/::after的content中用，且只能输出字符串，不能参与颜色、尺寸等计算 -
var(--theme-color)是真正的 CSS 值，可用于任意支持的属性，但无法读取 HTML 属性值 - 试图写
color: var(attr(data-color))—— 语法错误，var()不接受attr()作为参数 - 真要桥接，得靠 JS：
el.style.setProperty('--from-data', el.dataset.color)
最易被忽略的一点：CSS 自定义属性的“动态性”完全依赖于 JS 注入或媒体查询切换，它自身没有参数系统、没有作用域链参数传递、也没有模板化能力。把 var() 当成函数调用，是多数人踩坑的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
