Media Queries in SCSS

We write all our media queries within the _states.scss file. If the project you are working on follows our standard for SMACSS organization, you should be able to find that file inside:

scss/smacss/_states.scss

Instead of doing just a few big media query wrappers (one for mobile, one for tablet, etc), we nest our media queries inside of the module–or element–that they affect. This makes our code easy to read and it makes it a lot easier to maintain, since we know that all media queries are right with the element they affect.

We also use a really nifty mixin that makes our media queries super clean. Be sure to include this in scss/partials/_mixins.scss :

@mixin bp($point) {

  $bp-mobile: "(max-width: 767px)";
  $bp-tablet: "(max-width: 1024px)";
  $bp-xlarge: "(max-width: 1599px)";
  $bp-huge: "(min-width: 1600px)";

  @if $point == mobile {
    @media #{$bp-mobile}  { @content; }
  }
  @else if $point == tablet {
    @media #{$bp-tablet} { @content; }
  }
  @else if $point == xlarge {
    @media #{$bp-xlarge} { @content; }
  }
  @else if $point == huge {
    @media #{$bp-huge} { @content; }
  }

}

When you want to use the mixin to add a media query, you do it like so:

header{background: purple; height: 100px;
	@include bp(tablet){height:80px;}
	@include bp(mobile){height:50px;}
}

Here’s your css output:

header {
  background: purple;
  height: 100px; }
  @media (max-width: 1024px) {
    header {
      height: 80px; } }
  @media (max-width: 767px) {
    header {
      height: 50px; } }

What about performance?

Some people say this code is too bloated. Here’s some awesome research that Kimberly Blessing did on optimizing media queries, basically showing that it’s not a big deal.

Chris Coyier and Dave Rupert also addressed the issue on shoptalkshow.