all-sprites functionality

[bitxl]

Hi,

I could not find this anywhere online so I decided to build it from what you made! :) I have a case where I need to generate all classnames with their corresponding backgrounds from a sprite folder, but when doing this with the advised code from compass there's a deprecation error as they use an @extend and that does not combine with doing an @include. So from this code:

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

I extended your code in the following way:

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $map, $map-2x) {
    background-image: sprite-url($map);
    background-position: sprite-position($map, $sprite);
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    height: image-height(sprite-file($map, $sprite));
    width: image-width(sprite-file($map, $sprite));

    @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-image: sprite-url($map-2x);
        background-size: (image-width(sprite-path($map-2x)) / 2) (image-height(sprite-path($map-2x)) / 2);
        background-position: round(nth(sprite-position($map-2x, $sprite), 1) / 2) round(nth(sprite-position($map-2x, $sprite), 2) / 2);
        height: image-height(sprite-file($map-2x, $sprite)) / 2;
        width: image-width(sprite-file($map-2x, $sprite)) / 2;
    }
}

@mixin all-sprites-retina($map, $map-2x){
  $name: sprite-map-name($map);
  @each $sprite in sprite-names($map) {
    .#{$name}-#{$sprite}{
      @include use-sprite($sprite, $map, $map-2x);
    }
  }
}

this also allows for different sprite folders and such, as I for example use this code like this:

$provider_sprite: sprite-map("sprites/provider/*.png");
$provider_sprite-2x: sprite-map("sprites-2x/provider/*.png");
@include all-sprites-retina($provider_sprite, $provider_sprite-2x);

Hope this can help someone else with the same problem, and might give @Gaya ideas on how to expand this useful mixin! :)

[bitxl]

Optimized my own code, compass was generating a sprite for each element in the loop

/*
 * Retina Sprites for Compass
 * by:              Gaya Kessler
 * last update:     03/11/14
 *
 * Usage:
 * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
 * 2. adjust the foldernames defined below if you use different names.
 * 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
 * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
 * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
 */

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $map, $map-2x, $sprite_url, $sprite_url-2x) {
  @if($sprite_url){
    background-image: $sprite_url;
  } @else {
    background-image: sprite-url($map);
  }

  background-position: sprite-position($map, $sprite);
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  height: image-height(sprite-file($map, $sprite));
  width: image-width(sprite-file($map, $sprite));

  @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) {
    @if($sprite_url-2x){
      background-image: $sprite_url-2x;
    } @else {
      background-image: sprite-url($map-2x);
    }
    background-size: (image-width(sprite-path($map-2x)) / 2) (image-height(sprite-path($map-2x)) / 2);
    background-position: round(nth(sprite-position($map-2x, $sprite), 1) / 2) round(nth(sprite-position($map-2x, $sprite), 2) / 2);
    height: image-height(sprite-file($map-2x, $sprite)) / 2;
    width: image-width(sprite-file($map-2x, $sprite)) / 2;
  }
}

@mixin all-sprites-retina($map, $map-2x) {
  $name: sprite-map-name($map);
  $sprite_url: sprite-url($map);
  $sprite_url-2x: sprite-url($map-2x);
  @each $sprite in sprite-names($map) {
    .#{$name}-#{$sprite} {
      @include use-sprite($sprite, $map, $map-2x, $sprite_url, $sprite_url-2x);
    }
  }
}

[Gaya]

This looks like it could be extremely useful to some people. I will try and merge your code if I find the time. You can also do a merge request in GitHub so you'll become a contributor to this repo.

Thanks for participating.