Concatenate variable with string to form another variable - css

Question

#color-purple: "#ffffff"
#colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey;
.ColorsMixin(#i:0) when(#i =< length(#colors)){ //loop over icons array
#color: extract(#colors, #i); //extract the icon at current index #i
.color--#{color}{
background: #{color-#{color}};
&:before{
content: "#{color}";
}
&:after{
content: "\#{color-#{color}}";
}
}
.ColorsMixin(#i + 1);
}
.ColorsMixin();
So, I can get it to do what I want to do in the
content: "\#{color-#{color}}";
part. This will output
content: "#ffffff";
However, when I try to output the #color-purple variable as the background, LESS throws an error. It only seems to work if I wrap it in quotation marks, but the background property wants the hex code without the quotes around it.
What's the trick here?

Answer 1

background: #{color-#{color}};
is not valid Less syntax, the proper one would be:
background: ~'#{color-#{color}}';
Note however, the very idea of indirectly refering to a variable values via escaping is a durty kludge (quite wide-spread but still very dirty).
It works when you assign such value directly to CSS property, but it will fail for anything else, simply because such value is not a color anymore but an unquoted string with an unknown content...
E.g. the following code will fail:
#color-dark-purple: #321;
div {
#color: 'color-dark-purple';
background: fade(~'#{color}', 50%); // error, not a color value
}
The proper Less method of getting a variable value via its name is "variable reference", e.g.:
#color-dark-purple: #321;
div {
#color: 'color-dark-purple';
background: fade(##color, 50%); // OK, proper color value
}
Additionally, take a time to consider if the whole approach of having all these colors as distinct variables and then having a separate list of these variables names is really what you need. Normally a single list having both color names and values is not such awfully bloating and much more maintainable.