Compass - Sprite image scaling

问题

I'm creating a Sencha Touch web app using Compass. Had a go at inline-url but my images are huge so am looking to move them into a sprite instead (and re-use with background-size).

Currently my inline-images can be scaled because they're a single file. Sprites have positions which are generated upon creation of the sprite. When you change the sprite size using background-size you need to alter the position as well.

Is it possible to grab the index of the sprite? Then I can say that if I want it to be background-size: 50px and the index is 3 then the new background-position is 0 150px;

Can't see anything about where compass stores or gets the index of each item in the sprite. My image starts with an 'A' so is the first in the folder, is referenced first in my SCSS but it's index is 3 so I'm not sure how to work this out.

回答1:

I found this, which helped me somehow: https://gist.github.com/3410875

I'm using it in this way:

$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;

.logo-brand {
    $spriteName: brand;
    $percentage: 40;

    @include resize-sprite($logo-sprites, $spriteName, $percentage);
}

Not sure if this is answering your question though.

来源：https://stackoverflow.com/questions/12745682/compass-sprite-image-scaling