Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// Breakpoints
@mixin breakpoint($points...) {
  @for $i from 1 through length($points) {
    $point: nth($points, $i);
    
    // iPhone 4/4s
    @if $point == mobile-narrow {
      @media (max-device-width: 320px) and (max-device-height: 480px) { @content; }
    }
    // iPhone 5 and medium android phones
    @if $point == mobile-normal {
      @media (max-device-width: 320px) and (min-device-height: 481px) { @content; }
    }
    // iPhone 6/6 plus and wide android phones
    @else if $point == mobile-wide {
      @media (max-device-width: 599px) and (min-device-width: 321px) { @content; }
    }
    // Tablets
    @else if $point == tablet {
      @media (min-device-width: 600px)  { @content; }
    }
  }
}

.body {
  @include breakpoint(mobile-narrow, mobile-normal, tablet) {
    background: red;
  }
}

SassMeister-output.css

@media (max-device-width: 320px) and (max-device-height: 480px) {
  .body {
    background: red;
  }
}
@media (max-device-width: 320px) and (min-device-height: 481px) {
  .body {
    background: red;
  }
}
@media (min-device-width: 600px) {
  .body {
    background: red;
  }
}