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.
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);
).