Responsive SASS mixins for retina displays

_hero.scss

.hero {
  background: url('/images/hero-mobile.jpg') no-repeat center center;
  background-size: cover;

  @include breakpoint(tablet) {
    background-image: url('/images/hero.jpg');
  }

  @include retina {
    background-image: url('/images/hero-mobile@2x.jpg');

    @include breakpoint(tablet) {
      background-image: url('/images/hero@2x.jpg');
    }
  }
}

mixins.scss

@mixin breakpoint($media) {
  @if $media == tablet {
    @media only screen and (min-width: $screen-md-min) { @content; }
  } @else if $media == desktop {
    @media only screen and (min-width: $screen-lg-min) { @content; }
  }
}

@mixin retina {
  @media only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
    @content;
  }
}