Mixin for responsive sprites with Sass

gistfile1.scss

@mixin responsive-sprite($map, $icon){
  $icon-file: sprite-file($map, $icon);
  $icon-width: image-width($icon-file);
  $icon-height: image-height($icon-file);

  $sprite-file: sprite-path($map);
  $sprite-width: image-width($sprite-file);
  $sprite-height: image-height($sprite-file);

  $space-top: floor(nth(sprite-position($map, $icon), 2));
  @if $space-top == 0 {
    $space-top: 0px
  }

  width:percentage($sprite-width / $icon-width);
  display: block;
  height: 0;
  padding-bottom: percentage($icon-height / $icon-width);
  background-size: 100%;
  background-position:0 percentage(
    -1 * $space-top / ( $sprite-height - $icon-height )
  );
}

Figured it out! If you encapsulate the sprite element into a div with max-width equals to the sprite image you are displaying, it will never be wider than it's original width.

This works great, but do you think there would be a way to pass a desired width to the mixin, so that instead of the image being responsive, it gets set to one size?

For example:

.icon-foo{
  @include responsive-sprite($icon-sprites, foo, 200px);
}

This would be useful if you want to have more control over the exact size of the icon without wrapping it in a containing element.

Sorry, I am new in sprites images.
When I compile I get Undefined variable: "$icon-sprites"
Could you tell me how to define this variable?
I am using the same example as you.

Finally, I got it!
But I want the same request as @nicolasiensen
This would be great the image respect the original width and it doesn't span the whole of its container