CSS变量不能存对象、数组或函数，因其值仅为纯字符串，浏览器不解析语法、不执行计算；仅能安全存储带单位或括号的合法CSS片段（如颜色、长度、阴影），且须用于匹配的属性位置。
为什么 CSS 变量不能存对象、数组或函数
CSS 变量的值在运行时被当作原始字符串插入到声明中，浏览器不会对其内容进行任何解析或求值：
-
cubic-bezier(0.17, 0.89, 0.32, 1.28)存进--ease后，transition-timing-function: var(--ease)会失效——因为展开后是字符串字面量，不是合法的缓动函数 -
url(#glow)存进--filter-id，filter: var(--filter-id)不生效——浏览器识别不出带引号的字符串是 URL 引用 -
0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)直接赋给--shadow，必须加引号且确保逗号空格严格匹配，否则解析失败
CSS 变量能安全存储哪些“复杂”值
所谓“复杂”，仅指带单位、括号、逗号、空格的合法 CSS 语法片段，前提是它被用在**支持该语法的位置**：
- 多层阴影：
--shadow-complex: "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)";→ 必须用引号包裹，且只能直接用于box-shadow声明 - 断点阈值：
--breakpoint-md: 768px;→ 单位必须显式写出，才能在@media (min-width: var(--breakpoint-md))中正常工作 - 颜色值：
--accent: #ff6b6b;或--accent: hsl(12, 100%, 60%);→ 颜色本身是原子值，可直接用于color、background-color
真正需要结构化数据时该怎么办
当业务逻辑依赖数组索引、对象键名、条件分支时，CSS 变量已超出能力边界：
- 贝塞尔曲线参数 → 改用
@keyframes绑定动画名，再用变量控制animation简写值 - SVG 滤镜切换 → 用
data-filter属性 + 属性选择器，或 JS 动态更新<filter>节点 - 混合模式切换 → 预定义
.mix-overlay等工具类，JS 切换 class，而非尝试mix-blend-mode: var(--mode)
容易被忽略的关键限制
很多人以为加个 fallback 就能兜底，但 var(--x, calc(1em + 1px)) 这类写法是无效的——回退值不参与计算，也不能嵌套 var() 调用。更隐蔽的是：变量值一旦进入 calc()、url() 或函数上下文，就不再是原始字符串，而是触发独立解析规则，此时变量行为完全不可控。
立即学习“前端免费学习笔记（深入）”；
