Compass Sprite Image and Scale

Question

I\'ve spent the past 4 hours trying to find a way to create a sprite image with Compass and sass that also automatically scales each individual image for use with the backgr

Answer 1

Here's a mixin for resizing sprites that works beautifully

@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) );
}

and the github it came from: https://gist.github.com/darren131/3410875