CSS变量如何存储多个颜色值？

CSS变量不支持存储多个颜色值，因其本质是单值容器；正确做法是按语义拆分为独立变量（如--color-primary）、按分量拆解（如--primary-h/s/l）或用命名空间模拟颜色组。

不能直接用一个 CSS 变量存多个颜色值——--colors 里写 #2563eb #10b981 #ef4444 是无效字符串，浏览器既不会解析，也无法在 color 或 background 中自动拆解使用。

为什么 var(--colors) 无法直接用于多色场景

CSS 变量本质是“单值容器”，不是数组或列表。即使你把多个十六进制拼成字符串赋给 --colors，var(--colors) 返回的仍是整个字符串，而 background: var(--colors) 会因语法错误被忽略（DevTools 显示 Invalid property value）。

1. 浏览器不支持类似 background: var(--colors, 0) var(--colors, 1) 这种索引取值
2. calc()、rgba()、hsl() 等函数均无法对空格分隔的字符串做切分或索引
3. 伪类覆盖（如 button:hover { --colors: ... }）也只能替换整串，无法局部更新某一种

真正能落地的三种多色组织方式

核心思路：把“多个颜色”转化为“多个独立变量”或“可组合的语义结构”，而非强行塞进一个变量。

1. 按用途拆分语义变量：--color-primary、--color-success、--color-warning 各自独立声明，各自可被 JS 单独修改或媒体查询重定义
2. 按层级拆分 RGB/HSL 分量：若需动态生成一组渐变色（如主色 + 亮/暗变体），用 --primary-h、--primary-s、--primary-l + --lightness-light、--lightness-dark 组合出 --color-primary-light 和 --color-primary-dark
3. 用 CSS 自定义属性模拟“颜色组”命名空间：例如 --palette-brand-1、--palette-brand-2、--palette-accent-1，靠命名约定管理，而非技术封装

JS 动态读写多个颜色时的坑

用 getComputedStyle(document.documentElement).getPropertyValue('--color-primary') 能取到值，但别指望 getPropertyValue('--colors') 返回数组——它只返回字符串，且含空格和换行，需手动 .split(/s+/) 处理，再逐个校验是否为合法颜色值。

1. 从 JS 设置时，必须确保每个变量都单独调用 setProperty()，例如：document.documentElement.style.setProperty('--color-primary', '#2563eb')
2. 如果依赖 fallback（如 var(--color-primary, #000)），注意：只有变量存在但值非法（如 none）才触发 fallback；变量根本未定义时，var() 返回空，属性失效
3. 避免嵌套 var(var(--x))——CSS 不支持变量链式展开，会直接报错

多色管理的关键不在“存得更多”，而在“拆得更准”。变量名是否语义化、分量是否可独立调节、是否预留了深色模式或主题切换的扩展位，比堆砌数量重要得多。