Concatenate variable with string to form another v

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.