Use less to generate dynamic CSS rules based on parameter value and passed mixin

Question

It is possible to achieve something like this in LESS?

.some-button(@className) {
  @className { .actionIcon; }
  tr:hover {
    @className { .actionButton; }
  }
}

When I call it:

.some-button(.edit-action);

The expected output should be :

.edit-action { .actionIcon; }
tr:hover { .edit-action { .actionButton; } }

Currently I'm getting this "Unrecognized input in @className { .actionIcon; }" error:

.some-button(@className) {
  @className { .actionIcon; }
  tr:hover {

EDIT

Another thing I would like to achieve is to use a mixin as mixin parameter:

.actionButton(@buttonClassName; @buttonType) {
  @{buttonClassName} { 
    .actionIcon; 
  }
  tr:hover {
    @{buttonClassName} { 
        .actionHoverIcon; 
        @buttonType();
    }
  }
}

and call is like this:

.actionButton(~'.row-edit', button-harmful);

where button-harmful is a mixin.

seven-phases-max · Accepted Answer · 2014-02-06T19:16:26.290

6

They call this "Selector Interpolation", the correct syntax is:

.some-button(@className) {
    @{className} { 
        /* ... */
    }
}

// usage:
.some-button(~'.edit-action');

Or alternatively (if you know you will use only classes, i.e. . prefixed selectors) like this:

.some-button(@className) {
    .@{className} {
        /* ... */
    }
}

// usage:
.some-button(edit-action);

edited Feb 06 '14 at 19:16

answered Feb 06 '14 at 10:39

seven-phases-max

11,765
1
45
57

Works like a charm. Now I have updated the question to use mixins. – dragonfly Feb 06 '14 at 12:08

seven-phases-max · Answer 2 · 2014-02-06T20:40:25.443

1

To answer your second question (i.e. "use a mixin as mixin parameter"): in short, currently this is impossible in a straight forward way. There're a few workarounds that simulate this functionality though (You'll find a brief of those methods here and here).

For example:

.actionButton(@buttonClassName, @buttonType) {
    @{buttonClassName} {
        .actionIcon;
    }
    tr:hover {
        @{buttonClassName} {
            .actionHoverIcon;
            .call(@buttonType);
        }
    }
}

// usage:

.call(button-harmful) {.button-harmful}
.actionButton(~'.row-edit', button-harmful);

edited Feb 06 '14 at 20:40

answered Feb 06 '14 at 17:29

seven-phases-max

11,765
1
45
57

Btw., I recall I saw a great detailed answer about the "tagged callbacks" technique (e.g. "callback dispatching based on the pattern-matching") here at SO but I can't find it right now (@ScottS - probably it was yours?) – seven-phases-max Feb 06 '14 at 17:32
You are probably thinking of [this post](http://stackoverflow.com/questions/11551313/less-css-pass-mixin-as-a-parameter-to-another-mixin/11589227#11589227)? – ScottS Feb 06 '14 at 20:08
@ScottS I'm not sure. May be, may be not :) – seven-phases-max Feb 06 '14 at 20:09

Use less to generate dynamic CSS rules based on parameter value and passed mixin

EDIT

2 Answers2

Linked