Multiple Sprite Sheets?

[noslouch]

Hey!

Love this plugin. Thanks for the work. Maybe this is already possible and I'm reading your documentation wrong, but what if I need two sets of paired-up sprite maps?

For instance, a pair of sprites for mobile/mobile retina and a pair of sprites for desktop/desktop-retina?

Thanks! Brian

[AdamBrodzinski]

Thanks Brian!

Currently there isn't any support for multiple sets of images. Did you intend to use them with different media queries? The easiest way would probably be to create separate sprites like logo-mobile, logo-desktop, etc..

However, if you set it up like below, it will send both the mobile and desktop down the pipe:

$sprites: sprite-map("sprites/buttons/*.png");              // import 1x sprites from buttons subfolder 
$sprites2x: sprite-map("sprites-retina/buttons/*.png");     // import 2x sprites from buttons subfolder

.myBoringButton {
    @include retina-sprite(logo_desktop);
}

@media only screen and (max-width: 580px) {
   .myBoringButton {
      @include retina-sprite(logo_mobile);
   }
   body {background: red;}
}

I just started tinkering with some code that will split the desktop and mobile in this case, into separate files, but it might take a while to finish it as I have a lot on my plate the next few weeks.

[noslouch]

You know, I actually ended up here once I noticed that my designer conveniently named everything with suffixes according to device like _Phone and _Desktop. So I'll close this because I just combined everything and we're gravy!

[AdamBrodzinski]

Cool. I just re-read my post above and wanted to point out that if the code is used like above it will make the sprite size a bit bloated because it will include both _phone and _desktop images into one sprite, so if you're on mobile it's wasting a bit of bandwidth.

[noslouch]

Indeed. That was a blip of concern as I was thinking about ways to solve, but luckily my sprite sheet is relatively small (76k retina, 48k non-retina), so we should be ok.

I guess ideally there ought to be responsive sprite sheets, but depending on the project it may be unnecessary.