Using an icon sprite in a Media Query with Compass

_buttons.scss

// If the `@mixin` is being included inside of a media query, then set the
// `$in-mq` argument to `true` so that the non `@extend` image sprite is
// used. See _sprites.scss#show-icon-sprite-in-mq() for more info.
@mixin button($size: 'small', $in-mq: false) {
  // Trimmed styles not pertinent to the example...
  position: relative;
  
  &:after {
    content: '';
    @if $in-mq == true {
      @include show-icon-sprite-in-mq('triangle-right');
    } @else {
      @include show-icon-sprite('triangle-right');
    }
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -(icons-sprite-height('triangle-right') / 2);
  }

  @if $size == 'large' {
    width: 274px;
    height: 50px;
    padding-left: 20px;
    @include font-proxima-nova-semibold(18px, 50px);

    &:after {
      @if $in-mq == true {
        @include show-icon-sprite-in-mq('triangle-right-large');
      } @else {
        @include show-icon-sprite('triangle-right-large');
      }
      right: 15px;
      top: 50%;
      margin-top: -(icons-sprite-height('triangle-right-large') / 2);
    }
  }
}

_sprites-with-media-query-extension.scss

$icons-spacing: 2px;

@import "compass/utilities/sprites";
@import "icons/*.png";

@mixin show-icon-sprite($name) {
  @include ir;
  @include icons-sprite($name);
  width: icons-sprite-width($name);
  height: icons-sprite-height($name);
}

// Modern compass uses `@extend` for image sprites, but `@extend` doesn't work
// with media queries. This alternate form of `show-icon-sprite` doesn't
// use `@extend` behind the scenes so it is safe for sprites in media queries.
@mixin show-icon-sprite-in-mq($name) {
  @include ir;
  @include get-sprite($icons-sprites, $name);
}

// @mixin based on https://gist.github.com/brubrant/3166895
// http://compass-style.org/reference/compass/helpers/sprites
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $sprite-image: sprite-file($map, $sprite);

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
  $sprite-map: sprite-url($map);

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
  $sprite-position: sprite-position($map, $sprite);

  // output background
  background: $sprite-map $sprite-position $repeat;

  // http://compass-style.org/reference/compass/helpers/image-dimensions/
  // Checks to see if the user wants width output
  @if $width == true {
    width: image-width($sprite-image);
  }

  // http://compass-style.org/reference/compass/helpers/image-dimensions/
  // Checks to see if the user wants height output
  @if $height == true {
    height: image-height($sprite-image);
  }
}

_sprites.scss

$icons-spacing: 2px;

@import "compass/utilities/sprites";
@import "icons/*.png";

@mixin show-icon-sprite($name) {
  @include ir;
  @include icons-sprite($name);
  width: icons-sprite-width($name);
  height: icons-sprite-height($name);
}

button-example.scss

.button-large {
  width: 100%;
  max-width: 274px;

  @include respond('all-phones') {
    @include button($size: small, $in-mq: true);
    width: 100%;
    max-width: 140px;
  }
}