Media Query Scss Mixin

media-query-scss-mixin.scss

//Based off of http://css-tricks.com/media-queries-sass-3-2-and-codekit/
@mixin bp-min-width($point) {
  @media (min-width: $point)  { @content; }
}
@mixin bp-max-width($point) {
  @media (max-width: $point)  { @content; }
}
//Order matters for this plugin as it is currently written
@mixin bp($point) {

  //Default sizes taken from Bootstrap 3
  $screen-sm: 768px !default;
  $screen-md: 992px !default;

  @if $point == desktop {
    @include bp-min-width($screen-md + 1) {@content}
//    @media (min-width: ($screen-md + 1)) { @content; }
  }
  @else if $point == tablet {
    @include bp-max-width($screen-md) {@content}
//    @media (max-width: $screen-md)  { @content; }
  }
  @else if $point == phone {
    @include bp-max-width($screen-sm) {@content}
//    @media (max-width: $screen-sm)  { @content; }
  }
}

//Curent implementation requies that you do the desktop first
body{
  @include bp(desktop){background-color: lightpink;}
  @include bp(tablet){background-color: lightgreen ;}
  @include bp(phone){background-color: lightblue;}
}

For example see:

http://codepen.io/aashtonk/pen/gjDoH