Question

Now if we generate sprite image using compass

@import "imgs/*.png";
@include all-imgs-sprites;

we ill gate in our .css classes like this

.imgs-<imagename>

is it possible to delete “imgs” part? I need only .<imagename>

Answer 1

In that case don’t use the magical all. It’s not as convenient, but works fine. Just @import the sprite and @include the individual images in custom classes:

@import "imgs/*.png";

.circle {
    @include imgs-sprite('circle');
}

.square {
    @include imgs-sprite('square');
}

Make your life simpler by DRYing it up:

@each $file in circle, square {
    .#{$file} {
        @include imgs-sprite($file);
    }
}