Skip to content

Instantly share code, notes, and snippets.

@hulkish
Forked from remainstheday/media-queries.less
Last active August 29, 2015 14:15
Show Gist options
  • Save hulkish/002990ee152d857d407a to your computer and use it in GitHub Desktop.
Save hulkish/002990ee152d857d407a to your computer and use it in GitHub Desktop.
@screen-xs: 480px;
@screen-sm: 600px;
@screen-md: 768px;
@screen-lg: 960px;
@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Extra-small and up
.screen-xs-min(@rules) {
@media (min-width: @screen-xs-min) {
@rules();
}
}
// Extra-small and down
.screen-xs-max(@rules) {
@media (max-width: @screen-xs-max) {
@rules();
}
}
// Extra-small only
.screen-xs(@rules) {
@media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
@rules();
}
}
// Small and up
.screen-sm-min(@rules) {
@media (min-width: @screen-sm-min) {
@rules();
}
}
// Small and down
.screen-sm-max(@rules) {
@media (max-width: @screen-sm-max) {
@rules();
}
}
// Small only
.screen-sm(@rules) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
@rules();
}
}
// Medium and up
.screen-md-min(@rules) {
@media (min-width: @screen-md-min) {
@rules();
}
}
// Medium and down
.screen-md-max(@rules) {
@media (max-width: @screen-md-max) {
@rules();
}
}
// Medium only
.screen-md(@rules) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
@rules();
}
}
// Large and up
.screen-lg-min(@rules) {
@media (min-width: @screen-lg-min) {
@rules();
}
}
.screens(@rules-xs, @rules-sm, @rules-md, @rules-lg) {
.screen-xs-min(@rules-xs);
.screen-sm-min(@rules-sm);
.screen-md-min(@rules-md);
.screen-lg-min(@rules-lg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment