Media Query Sass Recipe

mediaqueries.scss

$break-small: 480px;
$break-large: 1024px;

@mixin media-query-for($device) {
  @if $device == palm {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $device == lap {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $device == lap-and-up {
    @media only screen and (min-width: $break-small + 1) { @content; }
  }
  @else if $device == portable {
    @media only screen and (max-width: $break-large - 1) { @content; }
  }
  @else if $device == desk {
    @media only screen and (min-width: $break-large) { @content; }
  }
}