Compass sprites and responsive images

Question

I have created a sprite sheet using compass:

$roundedicons-layout:smart;
@import "roundedicons/*.png";
@include all-roundedicons-sprites;

Which is about 11 icons, works fine.

I also have this in a partial when I need to adjust classes with just a simple include: @include respond-to(phone) { width: 100% ;} for mobile, tablet and Desktop:

$break-desktop: 1024px;
$break-tablet: 720px;
$break-phone: 320px;

@mixin respond-to($media) {
  @if $media == phone {
    @media only screen and (max-width: $break-phone) { @content; }
  }
  @else if $media == tablet {
    @media only screen and (min-width: $break-phone + 1) and (max-width: $break-desktop - 1) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $break-desktop) { @content; }
  }
}

The problem I am currently having is that there are 3 different sizes for icon images for each device (desktop, tablet, and mobile). Also I have to support IE8, so I can't scale a background image. I was curious what the best way to do this without using a bunch of jquery to add and remove classes. My first instinct was to have a separate sprite sheet for all devices, but then I would have to switch classes in jquery. Then maybe I can combine it all into one, but then I would still have to use jquery. Is there a better method in compass I can use?

Thank you

Answer 1

If I understand right, this code can help you.

@import "compass";

//generated sprite for every device
$iconsSmall: sprite-map("icons/small/*.png");
$iconsMedium: sprite-map("icons/medium/*.png");
$iconsBig: sprite-map("icons/big/*.png");

//common class for all icons
.icons{
  @include respond-to(phone){
    background: $iconsSmall;
  }

  @include respond-to(tablet){
    background: $iconsMedium;
  }

  @include respond-to(desktop){
    background: $iconsBig;
  }
}

//for example icons name: close.png
.icon-close{
  @include respond-to(phone){
    background-position: sprite-position($iconsSmall, close);
  }

  @include respond-to(tablet){
    background-position: sprite-position($iconsMedium, close);
  }

  @include respond-to(desktop){
    background-position: sprite-position($iconsBig, close);
  }
}