Use less to generate dynamic CSS rules based on parameter value and passed mixin -
it possible achieve in less?
.some-button(@classname) { @classname { .actionicon; } tr:hover { @classname { .actionbutton; } } }
when call it:
.some-button(.edit-action);
the expected output should :
.edit-action { .actionicon; } tr:hover { .edit-action { .actionbutton; } }
currently i'm getting "unrecognized input in @classname { .actionicon; }" error:
.some-button(@classname) { @classname { .actionicon; } tr:hover {
edit
another thing achieve use mixin mixin parameter:
.actionbutton(@buttonclassname; @buttontype) { @{buttonclassname} { .actionicon; } tr:hover { @{buttonclassname} { .actionhovericon; @buttontype(); } } }
and call this:
.actionbutton(~'.row-edit', button-harmful);
where button-harmful mixin.
they call "selector interpolation", correct syntax is:
.some-button(@classname) { @{classname} { /* ... */ } } // usage: .some-button(~'.edit-action');
or alternatively (if know use classes, i.e. .
prefixed selectors) this:
.some-button(@classname) { .@{classname} { /* ... */ } } // usage: .some-button(edit-action);
Comments
Post a Comment