3

I want to use a variable that will contain the name of a color (red, blue, green, etc) and to 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 to me something like this:

.btn.#0000ff {
  color: #4b8df8;
  background-color: #3781f7;
  border-color: "";
}

Well, the way that .btn is displayed it's not ok. I would like to display it like this:

 .btn.blue{ ... }

I notice that less is automatically converting the color name into HEX value. I also tryied with quotes but it seems is not a good solution either. Is there any solution to fix this into an elegant way?

Thanks.

Edd
  • 31
  • 2
  • 1
    Unfortunately there doesn't seem to be a better way at the moment mate. However, as mentioned in [this](http://stackoverflow.com/questions/25661662/less-mixin-name-is-evalutated-to-colour-color/25662327#25662327) answer there is a proposal to do away with this conversion in Less 2.0.0. – Harry Oct 12 '14 at 11:19

0 Answers0