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){
    .@{className}{
        background: @image no-repeat -9999px transparent;
    }
    .counter (){
        .counter-redefine();
        .counter-wrapper (@counter + 1);
    }
    .counter-wrapper (@new : 0){
        .counter-redefine() {
            @counter : @new;
        }
    } .counter-wrapper ();
    // ICONS PER ROW AND COLS
    .loopRow(@rowIndex) when (@noOfRows >= @rowIndex) {
        .loopCol(@colIndex) when (@noOfCol >= @colIndex) {
            .@{className}_@{rowIndex}@{colIndex}{ 
                background-position: -(unit(@gridWidth * @rowIndex, px)) -(unit(@gridWidth * @colIndex, px));
            }
            .loopCol((@colIndex + 1)); 
        }
        // INITIATE COL LOOP
        .loopCol(1);
        // INCREMENT ROW
        .loopRow((@rowIndex + 1)); 
    }
    .loopRow(1); 
}

Implementation

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

I hope this will help you too.. Thanks

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: