Loop for generating data attributes/properties from variables in LESS

Question

So, I've got a LESS file of color variables:

@colorNameOne: #ff5722;
@colorNameTwo: #ff5722;
@colorNameThree: orange;

I want to go through each color in this list and generate something to this effect

Psuedo Code

for each color:

div[data-color="n"] {
    background-color: @colorName
}

where n is the number of the color you're on. (i.e. n for @colorNameTwo is 2)

Tried a few things but I'm new to LESS loops so any advice on how to approach this would be greatly appreciated.

Possible duplicate of [Loop through array of variable names in Less](http://stackoverflow.com/questions/21440789/loop-through-array-of-variable-names-in-less) — Serg Chernata, Jan 05 '17 at 18:05
Welcome to SO. Please have a look at [tour]. You may also want to check [What topics can I ask about](http://stackoverflow.com/help/on-topic), and [ask], and how to create a [mcve]. Post the code you have tried and the errors you have received. Be as specific as possible as it will lead to better answers. — happymacarts, Jan 05 '17 at 18:05
@SergChernata I'm trying to avoid writing each color name out manually, but this is still a useful link for other reasons — Afrophysics, Jan 05 '17 at 18:07
"I'm trying to avoid writing each color name out manually" than you just declare these colors as an array and not individual variables. (In a real project a list of global variables cannot serve as some useful data array since it will contain everything you've got in the project and not just colors). — seven-phases-max, Jan 06 '17 at 07:59

score 1 · Accepted Answer · answered Jan 05 '17 at 19:16

1

You need to store colornames in array ,not separate variables for each color.

After that you can just loop over it with index in order you want

answered Jan 05 '17 at 19:16

Kairat Kempirbaev

1

Are you certain this is the only way this can be achieved? I'm trying to avoid re-structuring a rather large color library. – Afrophysics Jan 05 '17 at 19:23
1

If you want to keep color variables just store their names in another array :with direct reference to ((div[data-color="n"] )) n variable. it would be the same as this question http://stackoverflow.com/questions/21440789/loop-through-array-of-variable-names-in-less – Kairat Kempirbaev Jan 05 '17 at 21:27

1 Answers1