var()不是函数，而是属性值占位符，仅可在CSS属性值中使用；若用于函数调用、选择器、属性名等位置，将导致语法错误。
var() 不是函数，只是属性值占位符
浏览器解析 CSS 时，var() 被当作一种“值引用语法”，不是可调用的函数。它只允许出现在属性值位置（如 color: var(--c);），不能出现在函数调用上下文里。写成 transform: var(--f)(); 或 background: var(--grad)(...); 会直接触发 Invalid property value 错误——因为解析器在语法分析阶段就拒绝了这种结构，连样式计算都不会进入。
CSS 里没有“动态函数名”这个概念
CSS 选择器、属性名、函数名都必须是静态字面量，编译/解析阶段就确定，不支持运行时拼接或变量替换。哪怕你用 JS 设置了 el.style.setProperty('--fn', 'linear-gradient')，background: var(--fn, linear-gradient); 依然无效：浏览器不会把 var(--fn) 的结果当函数名去识别，它只会尝试把字符串 "linear-gradient" 当作一个颜色值或长度值来解析，最终报 Expected color but found "linear-gradient" 这类错误。
试图用 var() 模拟函数调用的常见翻车点
以下写法全部非法，且错误类型不同，但根源一致：CSS 不允许值参与语法结构生成：
-
filter: var(--blur-fn, blur)(5px);→ 解析器看到var(--blur-fn, blur)(5px)，认为整段是无效函数调用，丢弃整条声明 -
mask-image: var(--mask-url);→ 如果--mask-url值是url(./a.png)，实际生效的是字符串字面量，不是 URL 加载行为；若值不含url(...)包裹，直接解析失败 -
@keyframes var(--anim-name) { ... }→var()出现在@keyframes规则名位置，语法非法，整条规则静默失效 - 在 Less/Sass 中写
#{var(--fn)}(...)→ 预处理器不解析var()，只当普通字符串输出，浏览器仍收不到合法函数调用
真正可行的替代路径只有 JS 驱动
想实现“根据变量切换函数行为”，必须跳出 CSS 声明式逻辑，改用 JS 动态写入完整声明：
立即学习“前端免费学习笔记（深入）”；
比如你想让 --effect 取值 "blur" 时加模糊、取值 "drop-shadow" 时加阴影，就得手动拼：el.style.filter = effect === 'blur' ? 'blur(4px)' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))';。任何试图让 CSS 自己“解释变量为函数名”的方案，都在挑战解析器的语法边界——它从一开始就不支持。
最容易被忽略的一点：这类问题往往在构建工具链里更隐蔽。PostCSS 插件、Vite 的 CSS 注入、甚至某些 UI 库的样式抽象层，可能悄悄把变量插进函数上下文，而你只看到控制台报错却找不到源头。检查最终注入到 <style></style> 标签里的原始 CSS 字符串，比盯着 JS 逻辑或预处理文件更能快速定位问题。
