Compass sprite resize mixin

example.scss

$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize

@import "my-icons/*.png";

$my-icons-sprite-dimensions: true;

@include all-my-icons-sprites;

// the fun part

.small-icons { // overriding all sprites
  @include resize-sprite-set($my-icons-sprites, 40); // 40% sized
}

.some-part-of-my-site {
  @include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok"
}

implementation.scss

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

@mixin resize-sprite-set($map, $percent, $only...) {
  $name: sprite_map_name($map);

  @each $sprite in sprite_names($map) {
    @if length($only) == 0 or index($only, $sprite) != false {
      .#{$name}-#{$sprite} {
        @include resize-sprite($map, $sprite, $percent);
      }
    }
  }
}

usage.html

<h1>Regular Size</h1>
<a href="my-icons-facebook">Facebook</a>

<h1>Small</h1>
<div class="small-icons">
  <a href="my-icons-facebook">Facebook</a>
</div>

This is awesome. Thank you!

This is very nice thanks. It would be GREAT if it could handle hover states as well =)

I needed to do exactly this, and you saved me a ton of trouble. Thanks! It'd be great if this were part of Compass itself. I think a lot of people would find it useful.

In my case I had to use

background-position: floor(nth(sprite-position($map, $sprite), 1)  * ($percent/100) ) floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );

instead of

background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );

Other than that, works like a charm, thanks!

This works! It's a time-saver too.

How can I do this with a retina sprite sheet?

this is my code atm:

@import "compass/utilities";
@import "compass/utilities/sprites";
@import "icons/.png";
@include all-icons-sprites(true);
$icons: sprite-map("icons/.png", $spacing: 5px); // sprite map
$sprite-high-res-suffix: '-2x' !default;

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $sprite-retina: false, $sprite-map: $icons) {
   $sprite-high-res: #{$sprite}#{$sprite-high-res-suffix};
   background-image: sprite-url($sprite-map);
   background-position: sprite-position($sprite-map, $sprite);
   background-repeat: no-repeat;
   overflow: hidden;
   height: image-height(sprite-file($sprite-map, $sprite));
   width: image-width(sprite-file($sprite-map, $sprite));

@if $sprite-retina {
  @media (-webkit-min-device-pixel-ratio: 2), 
  (-o-min-device-pixel-ratio: 3/2), 
  (min--moz-device-pixel-ratio: 2), 
  (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {

    background-size: (image-width(sprite-path($sprite-map)) / 2) (image-height(sprite-path($sprite-map)) / 2);
    background-position: round(nth(sprite-position($sprite-map, $sprite-high-res), 1) / 2) round(nth(sprite-position($sprite-map, $sprite-high-res), 2) / 2);
    height: image-height(sprite-file($sprite-map, $sprite));
    width: image-width(sprite-file($sprite-map, $sprite));
     }
   }

}

.logo{
@include use-sprite(logo, true);
}

Thanks! Just what I needed!