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

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

html - How to custom Bootstrap grid height? -

angular - Copying node modules to wwwroot AspNetCore -