jchambers micro media query

gistfile1.sass

// ---------------------------------
// Media query breakpoints & mixin
// 
// Usage: 
//
// @include mq("BREAKPOINT_NAME") { //styles } 


$breakpoints: (
  "extra-small" 500px,
  "small" 700px,
  "medium" 1047px,
  "large" 1300px,
  "extra-large" 1450px,
  "extra-extra-large" 1800px
);

@mixin mq($size, $type: "min-width") { 
  @each $breakpoint in $breakpoints {
    @if ($size == nth($breakpoint, 1)) {
      @media ($type: nth($breakpoint, 2)) {
        @content;
      }
    }
  }
}


.header {
  // Mobile styles first...
  padding: 1em;

  @include mq("medium") {
    // Add more padding for medium size screens...
    padding: 2em;
  } 

  @include mq("large") {
    // And yet more on large screens
    padding: 3em;
  } 
}