SASS - Media Query mixins with support for Breakpoint and Susy-media mixins. Uses SASS conditional logic to check if the Breakpoint media query mixin or the Susy-media mixin exists. Fallbacks to regular media query if neither mixin exists

sass-breakpoint-susy-media-mixin.sass

$media-query-mixin-warning: "You should be using the Breakpoint SASS mixin library or the Susy Grid mixin to take advantage of cool features. Your media query will still compile though"

=phone-only
  +phone("down")
    @content

=tablet-only
  +tablet("only")
    @content

=wide-only
  +wide("up")
    @content

=desktop-plus
  +desktop("up")
    @content

=below-desktop
  +desktop("down")
    @content

=below-tablet
  +tablet("down")
    @content

=phone($breakpoint: "")
  @if $breakpoint == "up" or $breakpoint == ""
    @if mixin-exists(breakpoint)
      +breakpoint($phone-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($phone-width)
        @content
    @else
      @media only screen and (min-width: $phone-width)
        @warn $media-query-mixin-warning
        @content
  @else if $breakpoint == "down" or $breakpoint == "only"
    @if mixin-exists(breakpoint)
      +breakpoint(max-width $phone-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media(max-width $phone-width)
        @content
    @else
      @media only screen and (max-width: $tablet-width)
        @warn $media-query-mixin-warning
        @content
  @else
    @if mixin-exists(breakpoint)
      +breakpoint($breakpoint)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($breakpoint)
        @content
    @else
      @media only screen and (min-width: $phone-width)
        @warn $media-query-mixin-warning
        @content

=tablet($breakpoint: "")
  @if $breakpoint == "up" or $breakpoint == ""
    @if mixin-exists(breakpoint)
      +breakpoint($tablet-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($tablet-width)
        @content
    @else
      @media only screen and (min-width: $tablet-width)
        @warn $media-query-mixin-warning
        @content
  @else if $breakpoint == "down"
    @if mixin-exists(breakpoint)
      +breakpoint(max-width $tablet-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media(max-width $tablet-width)
        @content
    @else
      @media only screen and (max-width: $tablet-width)
        @warn $media-query-mixin-warning
        @content
  @else if $breakpoint == "only"
    @if mixin-exists(breakpoint)
      +breakpoint($phone-width $tablet-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($phone-width $tablet-width)
        @content
    @else
      @media only screen and (min-width: $phone-width) and (max-width: $tablet-width)
        @warn $media-query-mixin-warning
        @content
  @else
    @if mixin-exists(breakpoint)
      +breakpoint($breakpoint)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($breakpoint)
        @content
    @else
      @media only screen and (min-width: $tablet-width)
        @warn $media-query-mixin-warning
        @content

=desktop($breakpoint: "")
  @if $breakpoint == "up" or $breakpoint == ""
    @if mixin-exists(breakpoint)
      +breakpoint($normal-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($normal-width)
        @content
    @else
      @media only screen and (min-width: $normal-width)
        @warn $media-query-mixin-warning
        @content
  @else if $breakpoint == "down"
    @if mixin-exists(breakpoint)
      +breakpoint(max-width $normal-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media(max-width $normal-width)
        @content
    @else
      @media only screen and (max-width: $normal-width)
        @warn $media-query-mixin-warning
        @content
  @else if $breakpoint == "only"
    @if mixin-exists(breakpoint)
      +breakpoint($tablet-width $normal-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($tablet-width $normal-width)
        @content
    @else
      @media only screen and (min-width: $tablet-width) and (max-width: $normal-width)
        @warn $media-query-mixin-warning
        @content
  @else
    @if mixin-exists(breakpoint)
      +breakpoint($breakpoint)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($breakpoint)
        @content
    @else
      @media only screen and (min-width: $normal-width)
        @warn $media-query-mixin-warning
        @content

=wide($breakpoint: "")
  @if $breakpoint == "up" or $breakpoint == "only" or $breakpoint == ""
    @if mixin-exists(breakpoint)
      +breakpoint($wide-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($wide-width)
        @content
    @else
      @media only screen and (min-width: $wide-width)
        @warn $media-query-mixin-warning
        @content
  @else if $breakpoint == "down"
    @if mixin-exists(breakpoint)
      +breakpoint(max-width $wide-width)
        @content
    @else if mixin-exists(susy-media)
      +susy-media(max-width $wide-width)
        @content
    @else
      @media only screen and (max-width: $wide-width)
        @warn $media-query-mixin-warning
        @content
  @else
    @if mixin-exists(breakpoint)
      +breakpoint($breakpoint)
        @content
    @else if mixin-exists(susy-media)
      +susy-media($breakpoint)
        @content
    @else
      @media only screen and (min-width: $wide-width)
        @warn $media-query-mixin-warning
        @content

sass-breakpoint-susy-media-mixin.scss

$media-query-mixin-warning: "You should be using the Breakpoint SASS mixin library or the Susy Grid mixin to take advantage of cool features. Your media query will still compile though";

@mixin phone-only {
  @include phone("down") {
    @content;
  }
}

@mixin tablet-only {
  @include tablet("only") {
    @content;
  }
}

@mixin wide-only {
  @include wide("up") {
    @content;
  }
}

@mixin desktop-plus {
  @include desktop("up") {
    @content;
  }
}

@mixin below-desktop {
  @include desktop("down") {
    @content;
  }
}

@mixin below-tablet {
  @include tablet("down") {
    @content;
  }
}

@mixin phone($breakpoint: "") {
  @if $breakpoint == "up" or $breakpoint == "" {
    @if mixin-exists(breakpoint) {
      @include breakpoint($phone-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($phone-width) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $phone-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else if $breakpoint == "down" or $breakpoint == "only" {
    @if mixin-exists(breakpoint) {
      @include breakpoint(max-width $phone-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media(max-width $phone-width) {
        @content;
      }
    }
    @else {
      @media only screen and (max-width: $tablet-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else {
    @if mixin-exists(breakpoint) {
      @include breakpoint($breakpoint) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($breakpoint) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $phone-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
}

@mixin tablet($breakpoint: "") {
  @if $breakpoint == "up" or $breakpoint == "" {
    @if mixin-exists(breakpoint) {
      @include breakpoint($tablet-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($tablet-width) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $tablet-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else if $breakpoint == "down" {
    @if mixin-exists(breakpoint) {
      @include breakpoint(max-width $tablet-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media(max-width $tablet-width) {
        @content;
      }
    }
    @else {
      @media only screen and (max-width: $tablet-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else if $breakpoint == "only" {
    @if mixin-exists(breakpoint) {
      @include breakpoint($phone-width $tablet-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($phone-width $tablet-width) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $phone-width) and (max-width: $tablet-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else {
    @if mixin-exists(breakpoint) {
      @include breakpoint($breakpoint) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($breakpoint) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $tablet-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
}

@mixin desktop($breakpoint: "") {
  @if $breakpoint == "up" or $breakpoint == "" {
    @if mixin-exists(breakpoint) {
      @include breakpoint($normal-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($normal-width) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $normal-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else if $breakpoint == "down" {
    @if mixin-exists(breakpoint) {
      @include breakpoint(max-width $normal-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media(max-width $normal-width) {
        @content;
      }
    }
    @else {
      @media only screen and (max-width: $normal-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else if $breakpoint == "only" {
    @if mixin-exists(breakpoint) {
      @include breakpoint($tablet-width $normal-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($tablet-width $normal-width) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $tablet-width) and (max-width: $normal-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else {
    @if mixin-exists(breakpoint) {
      @include breakpoint($breakpoint) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($breakpoint) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $normal-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
}

@mixin wide($breakpoint: "") {
  @if $breakpoint == "up" or $breakpoint == "only" or $breakpoint == "" {
    @if mixin-exists(breakpoint) {
      @include breakpoint($wide-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($wide-width) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $wide-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else if $breakpoint == "down" {
    @if mixin-exists(breakpoint) {
      @include breakpoint(max-width $wide-width) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media(max-width $wide-width) {
        @content;
      }
    }
    @else {
      @media only screen and (max-width: $wide-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
  @else {
    @if mixin-exists(breakpoint) {
      @include breakpoint($breakpoint) {
        @content;
      }
    }
    @else if mixin-exists(susy-media) {
      @include susy-media($breakpoint) {
        @content;
      }
    }
    @else {
      @media only screen and (min-width: $wide-width) {
        @warn $media-query-mixin-warning;
        @content;
      }
    }
  }
}