Media queries

Wrap a min-width, max-width or a min- to max-width media query around a selector context with provided rules. You can even use declared detached rulesets for properties and selectors.

 // Example
 @property-ruleset: { display: none; };
 @selector-ruleset: {
     [detached-ruleset] {
         display: none;
     };
 };

 body {
     .media-min-width(600px, @property-ruleset);
     .media-min-width(600px, @selector-ruleset);
 }

 // Output
 body {
     @media screen and (min-width: 600px) {
         display: none;

         [detached-ruleset] {
             display: none;
         }
     }
 }