How can I call a mixin by reference in LESS?

Question

The logical way would be:

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

but I get a parse error.

Is there a way to do it?

Answer 1

Module mixins

If you want to call a specific mixin by a reference from a variable you would need to use a parameter, as you can not dynamicaly call parametric mixins by their names. So, the closest to what you want to do, would be using module mixins.

It would look like this in LESS:

.mixin(mymixin) {
  sample_key:samplevalue;
}

.mixin(anothermixin) {
  another_key:anothervalue;
}

@avar: mymixin;
.mixin(@avar);

the output CSS will be as expected:

sample_key: samplevalue;

and if you would change @avar to anothermixin you would specifically call the second mixin.

Here makes @ScottS a great use of this approach: LESS CSS Pass mixin as a parameter to another mixin

Edit:

To elaborate the answer a bit further. Why your approach wouldn't work? The problem is in selector/rule interpolation, where the line needs to have the following structure:

.prefix-satring-@{classname} some-more-string { property:value; }

so you can not call a mixin with it as it expects a { after the selector name and also an unescaped ( is not accepted as valid syntax in rule interpolation.

Additional info:

Similarly, you can not dynamically generate property names in LESS. So you can not do anything like .myclass{-webkit-@{property}:value;}, where this is possible in Sass (another very popular preprocessor language). However, there are some workarounds for that.

Another issue, that might be of notion here is that the interpolated classes (e.g. .@{avar}{something:something;}) get directly rendered into CSS and do not exist as LESS object/mixins, that you could reuse.