respond.scss

// create media queries from min/max
@mixin respond($min: 0, $max: null, $media: screen) {
  @if $min > 0 and $max {
    @include respond-between($min, $max, $media) { @content };
  } @else if $min == 0 and $max {
    @include respond-below($max, $media) { @content };
  } @else if $min and $max == null {
    @include respond-above($min, $media) { @content };
  }
}

@mixin respond-between($min: null, $max: null, $media: screen) {
  $max: $max - 1; // subtract 1 from max so (0, 720) and (720) dont overlap
  $query: "only " + $media + " and (min-width: " + $min + ") and (max-width: " + $max + ")";
  @media #{$query} { @content; };
}

@mixin respond-below($max: null, $media: screen) {
  $query: "only " + $media + " and (max-width: " + $max + ")";
  @media #{$query} { @content; };
}

@mixin respond-above($min: null, $media: screen) {
  $query: "only " + $media + " and (min-width: " + $min + ")";
  @media #{$query} { @content; };
}