How to create a sprite from a folder with and with

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

Thank you all for this. It works! Now, i have gone ahead and expand on it as i needed something a little more dynamic where icons are constructed based on ico-[size] ico-[image] & swatch-[color]

$myicons-spacing: 20px;

@import "icons/myicons/*.png";
@include all-myicons-sprites;


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

@each $sprite in sprite_names($myicons-sprites) {
  .ico-xsmall.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 35);
  }

  .ico-small.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 50);
  }

  .ico-medium.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 87.5);
  }

  .ico-large.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 100);
  }
}

Answer 2

Create placeholders for each in a loop and then include the placeholder wherever you need. For example:

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

@each $image in twitter, facebook, pinterest {
  %logo-#{$image} {
    @include resize-sprite($logo-sprites, $image, 40);
  }
}

.my-other-div-with-small-logos {
    .logo-twitter {
        @extend %logo-twitter;
    }
}

Note that this assumes all images should be resized by 40%. You'll need to do more creative iterating if you need to specify different percentages for different logos.

Better yet, maybe just generate the classes in the loop?

.my-other-div-with-small-logos {
  @each $image in twitter, facebook, pinterest {
    .logo-#{$image} {
      @include resize-sprite($logo-sprites, $image, 40);
    }
  }
}

Answer 3

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.