ricardozea
6/8/2015 - 2:10 PM

Simple media queries Sass mixin that lets you think in pixel widths but the output is in ems.

Simple media queries Sass mixin that lets you think in pixel widths but the output is in ems.

//Mobile-first Media Query Mixin
@mixin forLargeScreens($media) {
  @media (min-width: $media/16+em) { @content; }
}

//Usage
.selector {
   width: 100%; //Properties for small screens
   @include forLargeScreens(640) { // 640 ÷ 16 = 40
      width: 50%; //Properties for large screens
   }
}

//Compiles to
.selector {
  width: 100%;
}
@media (min-width: 40em) {
  .selector {
    width: 50%;
  }
}