Compass: generate sprite for given selector

Question

I am using Compass (default engine) to generate sprite. Here is the SCSS I wrote

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

header.top-header {
    .back-icon a {
        @include icons-sprites(arrow-left-white);
    }
    .menu-icon a {
        @include icons-sprites(list-white);  
    }
}

I am hoping it would generate

header.top-header .back-icon a {
    background-position: 0 -787px;
}
header.top-header .menu-icon a {
    background-position: 0 -931px;
}

but instead, I got this

header.top-header .back-icon a .icons-arrow-left-white {
    background-position: 0 -787px;
}
header.top-header .menu-icon a .icons-list-white {
    background-position: 0 -931px;
}

What should I configure for Compass to place the background position as the way I'd like?

Answer 1

@import "compass/utilities/sprites";

//where you generate sprite
$icons: sprite-map("icons/*.png");

//add generated image sprite to .icons class
.icons{
  background: $icons;
}

header.top-header {
  .back-icon a {
    background-position: sprite-position($icons, arrow-left-white);
  }
  .menu-icon a {
    background-position: sprite-position($icons, list-white);
  }
}

more information you can find here: http://compass-style.org/reference/compass/helpers/sprites/