Managing sprites easily with lesscss

I use sprite css for all projects on which I work, creating sprite and managing coordinates is repetitive job but the problem is every design requires different sprite grid 😦 so I thought I can make this task simpler..

I am using less in my stack for all projects, I have written simple helper code to create sprite coordinates this code is not yet complete yet it requires some more editing, I am working on the same will and will be finished by day or two day, Right now I am much excited to post this snippet, Just the thing is it ill create excessive classes if you have not filled all grids with icons

.spriteGenrator(@image, @className, @gridWidth, @gridHeight, @noOfRows, @noOfCol, @totalIcons){
        background: @image no-repeat -9999px transparent;
    .counter (){
        .counter-wrapper (@counter + 1);
    .counter-wrapper (@new : 0){
        .counter-redefine() {
            @counter : @new;
    } .counter-wrapper ();
    .loopRow(@rowIndex) when (@noOfRows >= @rowIndex) {
        .loopCol(@colIndex) when (@noOfCol >= @colIndex) {
                background-position: -(unit(@gridWidth * @rowIndex, px)) -(unit(@gridWidth * @colIndex, px));
            .loopCol((@colIndex + 1)); 
        // INCREMENT ROW
        .loopRow((@rowIndex + 1)); 


.spriteGenrator(url('../img/sprite.jpg'), ab_sp, 32, 32, 2, 3, 5);

I hope this will help you too.. Thanks


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: