Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This will generate media query mixins with SCSS.
$mobile: 768px !default;
$tablet: 769px !default;
$desktop: 1024px !default;
$widescreen: 1216px !default;
$fullhd: 1408px !default;
// Mobile Devices Only
// (0 - 768px)
@mixin mobile {
@media only screen and (max-width: $mobile) {
@content;
}
}
// Tablet Size and Up
// (769px - ∞)
@mixin tablet {
@media only screen and (min-width: #{$tablet}) {
@content;
}
}
// Tablet Size Only
// (769px - 1023px)
@mixin tablet-only {
@media only screen and (min-width: #{$tablet}) and (max-width: #{$desktop - 1px}) {
@content;
}
}
// Mobile & Tablet
// (0px - 1023px)
@mixin touch {
@media only screen and (max-width: #{$desktop - 1px}) {
@content;
}
}
// Desktop Size and Up
// (1024px - ∞)
@mixin desktop {
@media screen and (min-width: #{$desktop}) {
@content;
}
}
// Desktop Size Only
// (1024px - 1215px)
@mixin desktop-only {
@media only screen and (min-width: #{$desktop}) and (max-width: #{$widescreen - 1px}) {
@content;
}
}
// Widescreen Size and Up
// (1216px - ∞)
@mixin widescreen {
@media screen and (min-width: #{$widescreen}) {
@content;
}
}
// Widescreen Only
// (1216px - 1407px)
@mixin widescreen-only {
@media only screen and (min-width: #{$widescreen}) and (max-width: #{$fullhd - 1px}) {
@content;
}
}
// Full HD Size Only
// (1408px - ∞)
@mixin fullhd {
@media only screen and (min-width: #{$fullhd}) {
@content;
}
}
// Everything below Widescreen
// (0px - 1215px)
@mixin until-widescreen {
@media only screen and (max-width: #{$widescreen - 1px}) {
@content;
}
}
// Everything Below Full HD
// (0px - 1407px)
@mixin until-fullhd {
@media only screen and (max-width: #{$fullhd - 1px}) {
@content;
}
}
// When Printing your Webpage or Print-Previewing It
@mixin print {
@media print {
@content;
}
}

This will allow you to use media queries easily and cleanly throughout your other SCSS files.

This is how it works. Throughout your .scss files, use the @include keyword with the mixin name to implement the media query in your scss code:

@include tablet {
  width: 100%;
  background-color: red;
}

This will convert to:

@media only screen and (min-width: #{$tablet}) {
    width: 100%;
    background-color: red;
}

You can embed these mixins inside class definitions. For example:

.example-class {
  width: 100%;
  @include desktop {
    width: 50%; 
  }
}

Or you can use them outside of your class definitions and use definitions inside of them.

@include desktop {
 .content {
   width: 100%;
 }
 #example-id {
   color: red;  
 }
}

These are really useful. By using them in your classes you can clean up your code and make it easier to read. For example wrapping css definitions in @include tablet-only is a lot easier to read and understand than @media only screen and (min-width: #{$tablet}) and (max-width: #{$desktop - 1px}).

Another huge benefit of this is that if you decide to change breakpoints down the road, you can change them in one location and all of your media queries will change across all your SCSS/Compiled CSS.

Lastly, this is better for working on a team because everyone can use the mixins and you don't have to risk someone using a different media query style or forgetting an important keyword like screen and or something like that. It is easier to use mixins on a team than to look up the media queries your team uses.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment