Search code examples
javascriptcssless

Less compiling variable with other variable name error

I have a problem with variables declared with other variable name. In the below mixin I have a variable declared with other variable name like:

.label-color(@color) {
  @label-class:~"label-@{color}";
  @badge-class:~"badge-@{color}";
    @label-color:@@label-class;


 .@{label-class}, .@{badge-class} {
    background-color:@label-color !important;
 }  
}


.label-arrow(@color) {
   @label-class:~"label-@{color}";
   @label-color:@@label-class;

  .@{label-class}{
    &.arrowed:before {
        border-right-color:@label-color;
    }
    &.arrowed-in:before {
        border-color:@label-color;
    }
    &.arrowed-right:after {
        border-left-color:@label-color;
    }
    &.arrowed-in-right:after {
        border-color:@label-color;
    }
  }
}

Unfortunately my compiler does not recognize this kind of @label-color:@@label-class; and pull out error at this line. What modification should I do in order to compile well this part of my less.

Solution

  • Lessj4 seems to support variable referencing only by quoted string values so you have to split concatenation and escaping there (i.e. do not use ~"..." for @@ variables). E.g. the first mixin would look like this then: 

    .label-color(@color) {
    @label-color_: "label-@{color}";
    @label-color: @@label-color_;

    .label-@{color}, .badge-@{color} {
        background-color: @label-color !important;
    }  
}

    Same changes for the second mixin. (Assuming both mixins are invoked like .label-color(~"red"); or like .label-color(potato);).