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

I've also done some research on this. This gist is what I came up with: https://gist.github.com/apauly/7917906

Update:

The solution depends on three key-parts:

1. scale width
2. scale height
3. get background-position

0. Grab the dimensions for both, the complete sprite and the single 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);

1. Consider a div displaying a sprite as its background. Set background-size: 100%; to make sure, that the background sprite covers the full width of the div. If one would use width: 100%;, the result would be something like this:

+----------------+
|--|             | 
|----------------| 
|--------|       | <--- This is the sprite image we want to display 
|------|         |
+----------------+

So we need to enlarge our background to get something like this: (the div should have overflow:hidden though)

+----------------+
|---------|             | 
|-----------------------| 
|----------------|      | <---
|-------------|         |
+----------------+

To achieve that, just divide the width of the complete sprite by the width of the single icon:

width:percentage($sprite-width / $icon-width);

2. This one is basically inspired by a blog post form tkenny: http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/

The resulting sass code is this:

display: block;
height: 0;
padding-bottom: percentage($icon-height / $icon-width);
background-size: 100%;

3. The rest is just some basic math to calculate the top spacing of the icon inside of the sprite as a relative value:

Get the space from the top in pixels (a negative value):

$space-top:floor(nth(sprite-position($map, $icon), 2));

Sass will need a px-value

@if $space-top == 0 {
  $space-top: 0px
}

Set the background position with percentages:

background-position:0 percentage(
  -1 * $space-top / ( $sprite-height - $icon-height )
);

Answer 2

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