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）。
- 浏览器不支持类似
background: var(--colors, 0) var(--colors, 1)这种索引取值 -
calc()、rgba()、hsl()等函数均无法对空格分隔的字符串做切分或索引 - 伪类覆盖（如
button:hover { --colors: ... }）也只能替换整串，无法局部更新某一种
真正能落地的三种多色组织方式
核心思路：把“多个颜色”转化为“多个独立变量”或“可组合的语义结构”，而非强行塞进一个变量。
-
按用途拆分语义变量：
--color-primary、--color-success、--color-warning各自独立声明，各自可被 JS 单独修改或媒体查询重定义 -
按层级拆分 RGB/HSL 分量：若需动态生成一组渐变色（如主色 + 亮/暗变体），用
--primary-h、--primary-s、--primary-l+--lightness-light、--lightness-dark组合出--color-primary-light和--color-primary-dark -
用 CSS 自定义属性模拟“颜色组”命名空间：例如
--palette-brand-1、--palette-brand-2、--palette-accent-1，靠命名约定管理，而非技术封装
JS 动态读写多个颜色时的坑
用 getComputedStyle(document.documentElement).getPropertyValue('--color-primary') 能取到值，但别指望 getPropertyValue('--colors') 返回数组——它只返回字符串，且含空格和换行，需手动 .split(/\s+/) 处理，再逐个校验是否为合法颜色值。
立即学习“前端免费学习笔记（深入）”；
- 从 JS 设置时，必须确保每个变量都单独调用
setProperty()，例如：document.documentElement.style.setProperty('--color-primary', '#2563eb') - 如果依赖 fallback（如
var(--color-primary, #000)），注意：只有变量存在但值非法（如none）才触发 fallback；变量根本未定义时，var()返回空，属性失效 - 避免嵌套
var(var(--x))——CSS 不支持变量链式展开，会直接报错
多色管理的关键不在“存得更多”，而在“拆得更准”。变量名是否语义化、分量是否可独立调节、是否预留了深色模式或主题切换的扩展位，比堆砌数量重要得多。
