How to use the compass sprite production RWD, do not compile without pictures?

Question

My folder has a.png and b.png two pictures, and this is my scss code:

@import "icon/*.png";
@include all-icon-sprites(true);

Compile results:

.icon-sprite, .icon-a, .icon-b{
   background: url('/images/icon-s351f62e8ff.png') no-repeat;
}
.icon-a {
 background-position: 0 0;
 height: 138px;
 width: 170px;
}
.icon-b {
 background-position: 0 -138px;
 height: 44px;
 width: 113px;
}

When I use the media query produced RWD, only b.png make changes, and put under another tablet icon Data folder, as follows:

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  @import "tablet/icon/*.png";
  @include all-icon-sprites(true);
}

Compile results:

 @media only screen and (min-width : 768px) and (max-width : 1024px) {
  .icon-sprite, .icon-a, .icon-b {
   background: url('/images/tablet/icon-s26eab31296.png') no-repeat;
  }
}

But I do not want to compile .icon-a of this class, there is no a.png folder inside the file, how do I get it to compile the results as follows:

 @media only screen and (min-width : 768px) and (max-width : 1024px) {
  .icon-sprite, .icon-b {
   background: url('/images/tablet/icon-s26eab31296.png') no-repeat;
  }
}

Thank you:)

Answer 1

Maybe, this can help you:

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  @import "tablet/icon/*.png";
  @include icon-sprites(b);
}

where b - name of your b.png

more information you can find here: http://compass-style.org/help/tutorials/spriting/ chapter: "Selector Control"

Answer 2

I tried the way you offer, but after compiling still produces other class.

My final solution is still to create a tablet-icon folder, in addition to compile it and add a class to each state in html, and no way to continue with the same class do different css sprite.

Thank you for giving me some ideas:)