CSS变量不支持数组，--colors: red, green, blue仅存储为字符串，var()无法索引或遍历；可行方案包括预处理器、JS处理、多个独立变量或fallback兜底（但不解析原值）。
var() 只能返回单个值，无法解析逗号分隔的字符串为多个独立项，也不能索引、遍历或动态取第 n 个值。
为什么 --colors: red, green, blue 看起来像数组但实际无效？
这种写法只是把一串文本赋给变量，浏览器不会将其识别为结构化数据：
-
--colors: red, green, blue被当作一个字符串值存储，不是三个颜色 -
color: var(--colors)会尝试把整串red, green, blue当作颜色值，结果是无效声明（被忽略） - 没有
var(--colors, 1)或var(--colors[0])这类语法，CSS 不提供索引能力
想实现“多值复用”时的真实可行路径
必须借助外部工具或 CSS 原生机制绕过限制：
- 预处理器（Sass/Less）：真正支持数组和循环，编译后生成静态规则
- CSS 自定义属性 +
calc()/attr()/content：仅适用于极有限场景（如用content输出拼接字符串） - JavaScript 驱动：读取
getComputedStyle中的变量值，再在 JS 里做字符串分割或映射 - 多个独立变量模拟：如
--color-1: red、--color-2: green、--color-3: blue，配合类名或属性选择器手动切换
var() 的 fallback 不能救数组场景
第二个参数只用于变量未定义或值非法时的兜底，它不参与解析原始值：
-
color: var(--colors, black)—— 若--colors是red, green, blue，fallback 不触发，因为变量存在且值“合法”（字符串） - 即使写成
var(--colors, red)，也不会自动取第一个；它只是整个 fallback 值，不拆解原值 - 无法用
var(--colors-1)+var(--colors-2)模拟数组访问，除非你提前手动拆好并命名
