CODEWITHSUNDEEP
less
dragonfly
dragonfly

Reputation: 17783

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

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.

Upvotes: 1

Views: 590

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

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

Upvotes: 1

seven-phases-max
seven-phases-max

Reputation: 11820

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

Upvotes: 6

Related Questions