Sunday, January 4, 2015

Leveraging LESS to quickly & effectively create icons from sprite sheets

Joe Meyer, Solutions Architect

On a recent project, I was presented with a daunting task: generate icons from a handful of sprite sheets. While normally a trivial task, this particular instance proved a bit more daunting. Even with LESS, my icon/class generation from sprite sheets have never been terribly efficient on my end & the client had quite the library of icons they wanted to leverage for their site.

 

I found myself staring down 9 sprite sheets, each with up to 30 icons per sheet which meant I potentially had 270 icons with up to 4 states each for a maximum grand total of 1080 images to account for. Though the final image count was more in the 700 range  (Some sheets were partially empty, or didn't account for all 4 states), I still found myself needing to get my butt in gear and take my LESS efficiency to the next level if I didn't want to spend all my time hammering out icons. I sat down and drafted an ok system that ended up saving me a substantial amount of work, but - never satisfied - I set out to do better once the project came to a close & I hope to share my experience with you all today.

 

Firstly, it should be noted that my sprite sheets conundrum, however daunting, was definitely a good problem to have. In the "old days" these icons may have been presented to me as separate images, which would have been a handful to manage from a CSS standpoint and a nightmare from a HTTP request standpoint. CSS Tricks has a great article that goes into a little more detail about CSS sprites and the advantages of using them, but I'd like to focus on the LESS.

 

The second advantage that came with my task was the icons in all 9 sheets were relatively similarly sized and very uniformly laid out. The following diagram represents the layout of the majority of sprites

 

 

Standard Sprite Sheet Layout

Icon 1 (-100px)

Icon 2 (-200px)

Icon N ( n* -100px)

Default State

 (-100px)

Selected State

(-200px)

Pressed State

(-300px)

Disabled State

 (-400px)

 

 

..wherein each icon was nestled into the top left corner of each cell. So, with all the background in place, lets discuss some techniques for tackling 700 icons using LESS. Both techniques lean heavily on LESS preprocessor features, (mixins, loops, et al) so it's worth your time to check out the features page if you're rusty or haven't used LESS before.

 

Method 1 - Explicit Class Names

The first technique focuses on giving you the most control over class names. We need to create a few mixins to get this technique off the ground, and will need to do more typing than the second method, but we can create descriptive names for each icon that comes out of the sheet. Furthermore, this technique gives us more control over fringe cases. Consider the following sprite sheet, one of the 9 I was working with:

 

Special Sprite Sheet Layout

Icon 1 (-100px)

Icon 2 (-200px)

Icon N ( n* -100px)

Default State

(-100px)

Selected State

(-200px)

Default State

(-300px)

Selected State

(-400px)

 

..in which the last two rows are actually another set of icons, each of which with only two states. Let's draw up some LESS that will allow us to customize

 

Method 1 LESS

// Generate Icons (Explicit)

.sprite-variant(@height, @width, @background-img, @xpos, @ypos: