LESS mixin as function parameter

Question

..................................................

Existing mixins:

.mixin_1 {
    height: 1px;
}
.mixin_2 {
    height: 2px;
}
.mixin_3 {
    height: 3px;
}

.function(@get) {
  @get();
}

CALL:

.a{
  .function(mixin_1);
}
.b{
  .function(mixin_2);
}
.c{
  .function(mixin_3);
}

RESULT:

.a{
  height: 1px;
}
.b{
  height: 2px;
}
.c{
  height: 3px;
}

Question: how to do this? It's possible with current language specifications?

Answer 1

You cannot currently do a dynamic call to a mixin based off a variable directly. You can make your function() mixin into a "caller" or "getter" mixin in which you register the mixins that can be called by your function() mixin, like so (which utilizes pattern matching):

LESS

.function(@get) {
  .-(@get); //call for mixin
  //register mixins you want to call with function
  .-(mixin_1) { .mixin_1; }
  .-(mixin_2) { .mixin_2; }
}

.mixin_1 {
    height: 1px;
}
.mixin_2 {
    height: 2px;
}

#block {
    .function(mixin_1);
}

Outputs

.mixin_1 {
  height: 1px;
}
.mixin_2 {
  height: 2px;
}
#block {
  height: 1px;
}

Of course, if you want the mixins invisible to the css, then change them to this:

LESS change (added parenthesis)

.mixin_1() {
    height: 1px;
}
.mixin_2() {
    height: 2px;
}

New Output

#block {
  height: 1px;
}

Do you need it?

That level of abstraction can be useful at times, but often simply a pattern matching on the mixins will suffice. You would have to determine that. So with this simple example, it would be better to reduce to something like this:

.setHeight(1) {
    height: 1px;
}
.setHeight(2) {
    height: 2px;
}

#block {
    .setHeight(1);
}

More complex examples of mixins may not be so easily reduced, and then a mixin like what you want may be useful.

Answer 2

I think your code do same thing like this:

.mixin_1() {
    height: 1px;
}

.mixin_2() {
    height: 2px;
}

#block {
    .mixin_1();
}

And output will be:

#block {
  height: 1px;
}

I was asking about little different thing. However I found solution:

.function(@get) {
  .-(@get); //call for mixin
  //register mixins you want to call with function
  .-(mixin) { .mixin; }
}

#block {
    .mixin() {
        height: 1px;
    }
    .function(mixin);
}

#block {     
    .mixin() {
        height: 2px;
    }
    .function(mixin);
}

It outputs exactly what i wanted:

#block {
  height: 1px;
}
#block {
  height: 2px;
}

Overall, thanks for help.