Question

I want to use a Compass generated icon-sprite for two different scenarios.

1. Use the icon(s) in original size.
2. Use it the same icon(s) as a smaller version using CSS3 property background-size.

I first do this:

$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;

Now I can use the general created CSS-classes like .logo-twitter etc.

Two achieve the second result I could use this (darren131 / gist:3410875 – resize sprites in Compass):

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

.my-other-div-with-small-logos {
    .logo-twitter {
        $spriteName: twitter;
        $percentage: 40;

        @include resize-sprite($logo-sprites, $spriteName, $percentage);
    }
}

But if I have around 30 logos I would need to repeat this manually for each sprite-class.

Is it possible to import the folder twice, once for the original size and a second time with the backround-size property?
Or modify the mentioned method to create all classes automatically within another <div class="my-other-div-with-small-logos"> where the icons should appear smaller?

Or am I thinking in the wrong direction here?

Answer 1

That does it. It iterates over the whole map:

@each $sprite in sprite_names($logo-sprites) {
    .logo-#{$sprite} {
        @include resize-sprite($logo-sprites, $sprite, 40);
    }
}

This helped: Way to iterate over sprites in a map

It’s great to scale down sprites in modern Browsers without loading another generated sprite-image. If the logos sometimes are 50px, but should also be 20px somewhere else, this is perfectly fine.