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;
}
}
}