CSS变量数组-可能吗?

Dev*_*oug 5 css arrays css-variables

我了解如何在CSS中使用变量。他们帮助加快了我在客户站点的工作流程。

我注意到,在很多情况下,由于没有数组系统,我会在变量旁边写下一个数字以分配给特定的颜色或外观。可以这么说,我最终创建了一个准阵列。

像这样

--c1: color:#ddd;  //link color
--c2: color:#aaa;  //quote color
--c3: color:#444;  //body text
Run Code Online (Sandbox Code Playgroud)

是否可以在CSS中执行类似的操作?

--c new array (color:#ddd, color:#aaa, color:#444);
Run Code Online (Sandbox Code Playgroud)

然后调用数组

arr(--c,3); 
Run Code Online (Sandbox Code Playgroud)

代替

var(--c3);
Run Code Online (Sandbox Code Playgroud)

我知道CSS不是OOP,但是能够处理这样的数据会很好,特别是如果我可以将其扩展到两个维度的话。我也理解这在理论上可能是毫无意义的练习,因为键入--c3比执行--c,3甚至--c [3]更快。值得深思。

Bol*_*ock 5

CSS中的属性无法按照您描述的方式在数组中分组。这包括自定义属性。诸如Sass和LESS之类的预处理器具有映射和列表,但是自定义属性的工作方式(请参见规范的第3节)意味着无法使用在预处理器中找到的相同语法对它们进行分组和索引。