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.

This is one of the reasons why I'm not a fan of the moniker "Cascading Variables" - they don't have very much in common with the variables you see in most programming languages at all. — BoltClock, Oct 27 '16 at 04:56
I agree. The whole moniker issue is exactly what got me frustrated learning CSS 3 years ago until I understood how to use classes and ids properly and also how cascade a sheet according to rules and specs. Totally unlike programming syntax. I'm just relieved they finally added in variables. — DeveloperDoug, Oct 27 '16 at 05:52

score 11 · Answer 1 · answered Oct 27 '16 at 04:56

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.

CSS Variable arrays - possible?

1 Answers1