CSS Variable arrays - possible?

Question

I understand how to use variables in CSS. They have helped heaps with speeding up my work flow for my clients' sites.

I have noticed on more than a few occasions I would write down variables with a number next to it to assign to a particular color or look because there is no array system in place. I ended up creating a quasi-array so to speak.

Like this

--c1: color:#ddd;  //link color
--c2: color:#aaa;  //quote color
--c3: color:#444;  //body text

Is it possible to do something like this in CSS?

--c new array (color:#ddd, color:#aaa, color:#444);

Then call array

arr(--c,3); 

instead of

var(--c3);

I get that CSS is not a OOP, but it would be nice to be able to handle data like this, especially if I can extend it across two dimensions. I also understand this may be a pointless exercise in theory as typing --c3 is faster than doing --c,3 or even --c[3]. Food for thought.

Answer 1

Properties in CSS cannot be grouped in arrays in the way you describe. This includes custom properties. Preprocessors such as Sass and LESS have maps and lists, but the way custom properties work (see section 3 of the spec) means it's not possible to group them and index off of them using the same syntax found in preprocessors.