less - Change mixin variable based on media (or some other condition) -
say have complex mixin function. like
.mymixin(@count, @manyothervars) { .item { width: calc( 100% / @count); } //lot's of other rules not affected @count } and want call mixin different values different media e.g.
.someclass { @media screen (max-width: 1000px) { .mymixin(5, 1); } @media screen (min-width: 1000px) { .mymixin(10, 1); } } this works fine, except generated css duplicates stuff has not changed
@media screen (max-width: 1000px) { .someclass .item { width: calc( 100% / 5 ); } .someclass { /* lot's of other rules not affected @count */ } } @media screen (min-width: 1000px) { .someclass .item { width: calc( 100% / 10 ); } .someclass { /* lot's of other rules not affected @count */ } } which, needless say, quite wasteful when 1 thing changed.
are there workarounds produce leaner output don't require calling class know mixin does, or mixin know media rules? thought maybe detached rule-set help, given variables not exported i'm not sure how would.
desired output:
@media screen (max-width: 1000px) { .someclass .item { width: calc( 100% / 5 ); } } @media screen (min-width: 1000px) { .someclass .item { width: calc( 100% / 10 ); } } .someclass { /* lot's of other rules not affected @count */ }
remove static styles mixin , place them directly someclass selector.
.someclass { // lot's of other rules not affected @count @media screen (max-width: 1000px) { .mymixin(5, 1); } @media screen (min-width: 1000px) { .mymixin(10, 1); } } better solution:
.mymixin(@count, @manyothervars) { width: calc( 100% / @count); } .someclass { // lot's of other rules not affected @count .item { @media screen (max-width: 1000px) { .mymixin(5, 1); } @media screen (min-width: 1000px) { .mymixin(10, 1); } } } now mixin 1 thing. it's simple , reusable.
Comments
Post a Comment