How to join variable names?

Question

I need to join the name of some variables, here is an example:

file name: color-vars.less

First, some variables containing base and accent colors:

@red-base:#ff0000;
@red-accent:#FF1744;
@yellow-base:#FFCC00;
@yellow-accent:#FFEA00;

file name: color-mixin.less

A mixin that will allow me to combine colors

.add-color(@color-name){
    .@{color-name}-bg {
        background: ~"@{color-name}-base";
    }
    .@{color-name}-bg.accent {
        background: ~"@{color-name}-accent";
    }
}

file name: main.less

The main file that will call the mixin:

@import "color-vars.less";
@import "color-mixin.less";

.add-color(red);
.add-color(yellow);

This is the actual output:

.red-bg {
    background: red-base;
}
.red-bg.accent {
    background: red-accent;
}
.yellow-bg {
    background: yellow-base;
}
.yellow-bg.accent {
    background: yellow-accent;
}

What I was expecting is:

.red-bg {
    background: #FF0000;
}
.red-bg.accent {
    background: #FF1744;
}
.yellow-bg {
    background: #FFCC00;
}
.yellow-bg.accent {
    background: #FFEA00;
}

Keep in mind that I'm planning to use the lighten and darken functions, this is just an example, I need to get the value of a variable joining the name of the @color-name and a string like "base" or "accent".

Thanks note is considered as fluff and is not required. It would almost always get removed by reviewers and so I have made the edit. Similarly, I've edited out the pre-processor name from title also :) I like the way you have written the question though. It leaves nothing to imagination :) — Harry, Aug 03 '15 at 16:37

score 3 · Accepted Answer · answered Aug 03 '15 at 16:29

3

All that the code is doing currently with ~"@{color-name}-accent" is concatenating the value of the color-name variable with the string and printing it without quotes. The code does not ever evaluate the actual value contained by the variable with the concatenated name.

To print the value of the variable represented by the concatenated name, you should enclose it within another @{...} like in the below snippet:

.add-color(@color-name){
    .@{color-name}-bg {
        background: ~"@{@{color-name}-base}";
    }
    .@{color-name}-bg.accent {
        background: ~"@{@{color-name}-accent}";
    }
}

answered Aug 03 '15 at 16:29

Harry

87,580
25
202
214

1

Always glad to help :) – Harry Aug 03 '15 at 16:33
I have a problema when i try to use the lighten function, this is what i have: background:lighten(~"@{@{color-name}-base}",50%) ; but doesn't compile the css this is the error: SyntaxError: error evaluating function `lighten`: Object [object Object] has no method 'toHSL', do you have a solution for this? – Rodrigo Calix Aug 03 '15 at 17:50
Don't worry i found a solution http://stackoverflow.com/questions/19098037/define-variable-name-with-variable-in-less-operation, it could help too – Rodrigo Calix Aug 03 '15 at 18:01
1

@RodrigoCalix - Actually it is not a bug. Output of evaluation is a string whereas lighten function needs a color as input. Have a look at [this answer](http://stackoverflow.com/questions/25546248/less-built-in-functions-not-working-with-evaluated-strings-why/25546518) that I wrote earlier to a similar question. – Harry Aug 03 '15 at 18:32

How to join variable names?

I need to join the name of some variables, here is an example:

This is the actual output:

What I was expecting is:

1 Answers1