How to escape quotes in Less variable which stores a color name?

Question

I am working on a HTML/CSS project. I want to create classes for labels and texts based on the color. For example

text-red{
    color: red;
}

label-white{
    color: white;
}

To do this I am trying to create a mixin which accepts a name and a color as argument and creates this class. I wrote the following mixin :

.mixin(@name, @color) {
    .text-@{name} {
        color: @color !important;
    }
    .label-@{name} {
        color: @color !important;
    }
}

.mixin('white', white);

This gives me the following output

.text-'white'{ /* notice the quotes*/
    color: #ffffff
}

If I run this mixin as .mixin(white, white); I get

.text-#ffffff{
    color: #ffffff
}

How can I create a class like text-white using a mixin?

Answer 1

From the LESS "e" function reference:

e(@string); // escape string content

If you use the function e you'll get the correct result.

.mixin(@name, @color) {
    .text-@{name} {
        color: @color !important;
    }
    .label-@{name} {
        color: @color !important;
    }
}

.mixin(e('white'), white);

You can also create a variable and then use it for multiple purposes:

@whiteLiteral: e('white');
//mixin declaration code
.mixin(@whiteLiteral, white);