CODEWITHSUNDEEP
csssasscompass-sasssprite
anjiTechGuy
anjiTechGuy

Reputation: 125

Get Name of Sprite Files Automatically using Compass/Sass

I've been using Sass as of late and finally made the jump to include Compass (well, I use Mindscape in VS2010 and finally decided to give it a try). I am just loving the sprite generation capabilites. I have a question though to anyone in the know.

I have a specific directory that contains any images that will be used in a sprite file. Here is my code so far:

@import "icons/*.png";

@each $p in (delete, docEdit, buttonBack, docView, editAcct, email, help, info, lock, search, unlock) {
    .#{$p} { @include icons-sprites(#{$p}); }
}

Needless to say each element is a specific image file that will end up in the sprite.

This generates (as a sample) for each item in the list:

.delete .icons-delete {
    background-position: -23px 0;
}

.docEdit .icons-docEdit {
    background-position: -63px 0;
}

I was wondering if I could automate this further by getting all the names of the .png files in the indicated directory and doing the each loop on them without hardcoding them in. This way I could drop in or remove images if required, recompile and the output would create the classes automatically without me having to enter them in the list under the @each directive.

Thanks in advance for any suggestions or comments!

Upvotes: 0

Views: 384

Answers (1)

steveax
steveax

Reputation: 17753

Yep:

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

See the Compass Spriting Docs for more details and options.

Upvotes: 1

Related Questions