Media Query mixin - @MQ

mq.scss

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

$medias: // A 2-dimensional array of keywords and mediaqueries
  (wide, "all and (min-width:33em)")
  (small, "all and (max-width:33em)");

@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; }
      }
    }
  }
}