Media Query mixin - @MQ

mq.scss

// A mixin for media queries: @mq
//
// Use with keywords in $medias array:
// @include mq($media: iphone) {
//  ...
// }
// 
// Use with manual queries:
// @include mq("all and (min-width:33em)") {
//  ...
// }

$medias: // A 2-dimensional array of keywords and mediaqueries
  (tiny, "all and (max-width: 18.75em)") // 300px
  (mobile, "all and (min-width: 20em)") // 320px
  (large-mobile, "all and (min-width: 30em)") // 480px
  (small-tablet, "all and (min-width: 37.5em)") // 600px
  (tablet, "all and (min-width: 48em)") // 768px
  (desktop, "all and (min-width: 60em)") // 960px
  (large-desktop, "all and (min-width: 70em)"); // 112 0px

@mixin mq($query: nil, $media: nil) {
  @if $media == nil {
    @media #{$query} { @content; }
  }
  @else {
    @for $i from 1 through length($medias) {
      $keyword: nth(nth($medias, $i), 1);
      $content: nth(nth($medias, $i), 2);
      @if $media == $keyword {
        @media #{$content} { @content; }
      }
    }
  }
}