LESS mixin as function parameter - string

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.