Q:

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

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!

A:

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) }

A:

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:

Define variable name with variable in LESS operation
less undefined method error
Lighten color from parent in Less
Defining Variable Variables using LESS CSS

