Responsive Sprite

responsive-sprite.scss

// Responsive sprite (horizontal)
@mixin responsive-sprite($sprite-url, $images: (), $width: 100%, $padding-bottom: 100%) {
  display: block;
  padding-bottom: $padding-bottom;
  height: 0;
  width: $width;
  background-image: url($sprite-url);
  background-repeat: no-repeat;
  background-size: 100% * length($images);
  background-position: 0 0;

  // Get the ratio of one image out of the entire sprite.
  $ratio: 100% / (length($images) - 1);

  // Loop through each image in the sprite and create its modifier class.
  @for $i from 1 through length($images) {
    $image: nth($images, $i);

    &--#{$image} {
      background-position: ($ratio * ($i - 1)) 0;
    }
  }
}

// The following vertical responsive sprite is theory at the moment and hasn't been tested.

// Responsive sprite (vertical)
@mixin responsive-sprite-vertical($sprite-url, $images: (), $image-height: 100%, $width: 100%, $padding-bottom: 100%) {
  display: block;
  padding-bottom: $padding-bottom;
  height: 0;
  width: $width;
  background-image: url($sprite-url);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;

  @for $i from 1 through length($images) {
    $image: nth($images, $i);

    &--#{$image} {
      background-position: 0 ($image-height * ($i - 1));
    }
  }
}

usage.scss

// Create responsive sprite icons
$icons: (
  "facebook",
  "twitter",
  "youtube"
);

.link__icon {
  @include responsive-sprite('../images/sprite.svg', $icons, 25%, 25%);
}