Concatenate variable with string to form another variable

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?

score 2 · Accepted Answer · answered May 24 '17 at 15:21

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.

Thanks for the advice. I actually ended up getting an error when using ~'@{color-@{color}}'; The error is: Unknown word .color--extract(purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey, 0) { background: @{color-extract(purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey, 0)}; (^where the colors come from the @colors array, which I simplified in the example) But you've advised having 2 lists, so I'll look into that. Thanks — nicedevman, May 24 '17 at 15:27
You mistake is using 0 as the starting index. In Less the starting index is 1 (just because it is that way in CSS itself). *But you've advised having 2 lists* - not 2 - just one (like [here](https://stackoverflow.com/questions/20954762) for example). — seven-phases-max, May 24 '17 at 15:32

Concatenate variable with string to form another variable

1 Answers1

Linked