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){
         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:{ ... }


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?



source to share

All Articles