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;
}
.mixin(@name, @color) {
.text-@{name} {
color: @color !important;
}
.label-@{name} {
color: @color !important;
}
}
.mixin('white', white);
.text-'white'{ /* notice the quotes*/
color: #ffffff
}
.text-#ffffff{
color: #ffffff
}
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);