Skip to content

Instantly share code, notes, and snippets.

@simbo
Last active June 8, 2023 16:55
Show Gist options
  • Save simbo/9427230 to your computer and use it in GitHub Desktop.
Save simbo/9427230 to your computer and use it in GitHub Desktop.
/* =============================================================================
Media queries for different screen sizes
========================================================================== */
// xs only
.screen-xs(@rules) {
@media (max-width: @screen-xs-max) { @rules(); }
}
// sm and larger
.screen-sm-min(@rules) {
@media (min-width: @screen-sm-min) { @rules(); }
}
// sm only
.screen-sm(@rules) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @rules(); }
}
// sm and smaller
.screen-sm-max(@rules) {
@media (max-width: @screen-sm-max) { @rules(); }
}
// md and larger
.screen-md-min(@rules) {
@media (min-width: @screen-md-min) { @rules(); }
}
// md only
.screen-md(@rules) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @rules(); }
}
// md and smaller
.screen-md-max(@rules) {
@media (max-width: @screen-md-max) { @rules(); }
}
// lg
.screen-lg(@rules) {
@media (min-width: @screen-lg-min) { @rules(); }
}
// 1: xs only, 2: sm and larger
.screen(@rules-xs, @rules-sm) {
.screen-xs(@rules-xs);
.screen-sm-min(@rules-sm);
}
// 1: xs only, 2: sm only, 3: md and larger
.screen(@rules-xs, @rules-sm, @rules-md) {
.screen-xs(@rules-xs);
.screen-sm(@rules-sm);
.screen-md-min(@rules-md);
}
// 1: xs only, 2: sm only, 3: md only, 4: lg and larger
.screen(@rules-xs, @rules-sm, @rules-md, @rules-lg) {
.screen-xs(@rules-xs);
.screen-sm(@rules-sm);
.screen-md(@rules-md);
.screen-lg(@rules-lg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment