How to use variable variables in LESS with colors stored in named variables in loops and mixins?

Question

I have a LESS loop in which I determine color values to use in CSS rules. I get them through some quite complex vars evaluation, which forces me to use strings (If I remove the " I get a parse error). So what I get is a variable containing a color value in form of string.

@color: "@{col_@{animal}}"

// this is in a loop, and @animal contains the name of a var ('dog', 'cat', ...)
// @col_dog, @col_cat contain a color
// @col_dog: #F9E2A0 
// @col_cat: #094DD0

so if I try to assign this @color variable to a rule

.border { border-color: @color }

in CSS I get

.border {border-color: "#F9E2A0"}

Which obviously is ignored. Is there a way to get rid of the "string" form, or a way to do the vars evaluation I need without using strings?

Thanks!

`"@{col_@{animal}}"`: this kind of syntax (i.e. nested variable interpolations) is not really a valid Less statement (it works only in quite non-conformant `lessphp`). The correct method to use in your case is [referencing variables by name](http://lesscss.org/features/#variables-feature-variable-names) (supported by lesshp, the "official" and most of other Less implementations). — seven-phases-max, Jun 24 '14 at 16:49
I have tried to use that method, but I can't get it working in the loop I'm using, keep getting syntax errors :( — Torakiki, Jun 25 '14 at 13:12
I can't imagine why it would not work. Posting a more expanded example including the loop itself would help. — seven-phases-max, Jun 25 '14 at 13:14
You're right! I've set-up an example at [this link](http://www.matteosantagata.com/test.less). Thanks for helping me! — Torakiki, Jun 25 '14 at 14:03

score 3 · Answer 1 · answered Jun 24 '14 at 16:02

3

According to the docs http://lesscss.org/functions/#misc-functions-color

Parses a color, so a string representing a color becomes a color.

This should be doing what you want:

.border { border-color: color(@color) }

answered Jun 24 '14 at 16:02

Nico O

13,762
9
54
69

I have already tried to use `color(@color)` but I get a syntax error: "argument must be a color keyword or 3/6 digit hex e.g. #FFF". I'm using CodeKit's LESS compiler – Torakiki Jun 25 '14 at 09:59
Then it seems that @color is not a valid color string. What is the actual output? When you try to use: `color("#F9E2A0")` does that work for you? – Nico O Jun 25 '14 at 10:05
That is quite strange, since as I wrote in the question `@color` seems to be a valid color string. If I put it in a CSS rule it gets compiled as `border-color: "#F9E2A0"` But somehow it's evaluated in a different way when the `color()` function in executed :( – Torakiki Jun 25 '14 at 13:16
when `@color` equals `border-color: "#F9E2A0"` its logically, that `color(border-color: "#F9E2A0")` will throw an error. Separate the selector from the property value – Nico O Jun 25 '14 at 13:53
`@color` contains `"#F9E2A0"`. So if I write `background: @color;` i get in the compiled CSS `background: "#F9E2A0";`. The error pops up when I try do `background: color(@color);` in the LESS file. This last one looks OK to me! But not to the compiler :( – Torakiki Jun 25 '14 at 13:58
1

As written in the other comment, I've set-up an example at [this link](http://www.matteosantagata.com/test.less) so that you can see the code I'm using. Thanks for your help! – Torakiki Jun 25 '14 at 14:04
2

The color() method approach won't work when using the variable in a mixin. This will result in this error 'error evaluating function color: argument must be a color keyword or 3/6 digit hex e.g. #FFF' – Kapitein Witbaard Nov 07 '14 at 16:14

score 3 · Accepted Answer · edited May 23 '17 at 12:15

It's easy just use @@

I've been struggling with this myself for some time now. The solution is simple. Just use @@ instead of @ for the color. The color will then get parsed properly, and become an color object. For this to work I store the variable name 'color_cat' in a variable called @color first. The I use the variable variables technique @@ to resolve the variable.

In your case this code works:

@color_dog: red;
@color_cat: yellow;

.animal-border(@animal){
    @color: "color_@{animal}";

    .@{animal}.border{
        border-color: @@color;
    }
}
.animal-border(dog);
.animal-border(cat);

Results:

.dog.border {
  border-color: #ff0000;
}
.cat.border {
  border-color: #ffff00;
}

Some errors associated with this problem. This one occurs when using the darken or lighten methods:

error evaluating function darken: Object # has no method 'toHSL'

Or this occurs when trying to supply the string value "#FF0000" to the color method:

error evaluating function color: argument must be a color keyword or 3/6 digit hex e.g. #FFF

Some related posts on SO:

How to use variable variables in LESS with colors stored in named variables in loops and mixins?

2 Answers2

It's easy just use @@