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