Prevent variable color name to be converted to hexadecimal in smaller class names
I want to use a variable that will hold the name of the color (red, blue, green, etc.) and define some class style rules. For example:
.mixins-common-components(@colorName, @backgroundColor, @textColor){
.btn{
&.@{colorName}{
color: @textColor;
background-color: @backgroundColor;
border-color: "";
}
}
}
.mixins-common-components(blue, #3781f7, #4b8df8);
This will return me something like this:
.btn.#0000ff {
color: #4b8df8;
background-color: #3781f7;
border-color: "";
}
Well, as the .btn picture shows, this is not normal. I would like to show it like this:
.btn.blue{ ... }
I notice that less will automatically convert the color name to a HEX value. I tried to use quotes as well, but that seems to be a bad solution too. Is there a solution to fix this in an elegant way?
Thank.
+3
source to share
No one has answered this question yet
See similar questions:
or similar: