Sprite: Ahhhhhh... Refreshing, SASSy Images!

Dec 16, 2013 10:28:00 AM Nate

At the last Phoenix Drupal meetup, I was asked about using Compass and SASS to make Sprite(s). I knew it could be done, but Being a Dr. Pepper kind of guy myself, I wasn't entirely sure *HOW* to do it... so I decided to figure it out!

In case you're not familiar with SASS - it's is a Ruby-based (gem) CSS framework that compiles specifically formatted definitions into browser delicious CSS (it's CSS definitions written in a C-like, or PHP-esque kind of format)... "CSS with Superpowers" according to http://www.sass-lang.com! It's super sweet, super easy to get into, and it's quickly becoming irresponsible to call yourself a web developer nowadays and NOT use it!

Sprites are a fairly simple concept: they're essentially a single image made up of a collection of individual images, and you just code your site to provide different "views" of the parts of your sprite image that you want to see on any given element. These have two great benefits - first, you can drastically reduce the number of requests coming to your server. If you had 100 images in your site's theme, that would require 100 requests and 100 file downloads for every visitor to the site. With a sprite, you can just put all 100 images into a single image file, so each visitor only has 1 file download for the images on your site (albeit, a much larger download, but that's still faster!). This helps reduce both requests AND bandwidth on your site! Win-Win! The second benefit is that your browser can handle moving around a background image than render individual images on every element that uses it. This gives you a much better performance on your site. You can even do fancier things like rollovers and animations with very little processing power on your browser; this can make a huge difference for the browser performance of your site on mobile, for instance.

The bad part of sprites? Well, they're HARD to deal with in code...lots of unique and non-intuitive "background-position" definitions. Using CSS preprocessors like SASS (the language) and Compass (the compiler) to generate them is very attractive because it allows you to focus on WHAT you care about - which image goes where - and not HOW to code it and make it work!

So let's get into the nitty gritty! First, old school CSS, without sprites (circa 1996!)...

.cans-of-drPepper { background-image: url('cans-of/drPepper.png'); } .cans-of-cocaCola { background-image: url('cans-of/cocaCola.png'); } .cans-of-mellowYellow { background-image: url('cans-of/mellowYellow.png'); }

So, this example would have 4 hits on your server - 1 hit getting the CSS, and 3 hits for each image. Pretty un-awesome.

Now, new school CSS, using a sprite image (assuming each image is 30 x 30 pixels)...

.cans-of-drPepper, .cans-of-cocaCola, .cans-of-mellowYellow { background-image: url('images/soda-sprite.png'); } .cans-of-drPepper { background-position: 0 0; } .cans-of-cocaCola { background-position: 0 -30px; } .cans-of-mellowYellow { background-position: 0 -60px; }

Well, that's BETTER... because this now only has 2 hits - 1 for the CSS and the second for the soda-sprite.png image. Awesome-ish, but now it's also confusing to deal with in the code... "-30px" and "-60px" sure don't tell you very much about what image is going to be visible when the browser renders this CSS, is it!? Maintainability going forward is going to be tough, confusing...as flat as a week-old soda.

Now, let's go all baller-style with SASS sprites!

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

Yuppp...that's it...you're done! Now, you can use your fancy soda class names in your HTML! Woah, now -- so, what's ACTUALLY going on here?!

Well, assuming that our "cans-of" directory contains my various images (drPepper.png, cocaCola.png and mellowYellow.png), SASS will go inspect the directory, find all these individual PNG image files you've put in there, and compile down the following CSS:

.cans-of-sprite, .cans-of-drPepper, .cans-of-cocaCola, .cans-of-mellowYellow { background: url('/images/cans-of-s34fe0604ab.png') no-repeat; } .cans-of-drPepper { background-position: 0 0; } .cans-of-cocaCola { background-position: 0 -30px; } .cans-of-mellowYellow { background-position: 0 -60px; }

It additionally will take all these separate images and also create a sprite image called "cans-of-s34fe0604ab.png" (which is placed in your compiler's configured images directory). Not only did you avoid having to open up and work in Photoshop, you've also managed to keep all your images straight! Now, going forward, all you care about is applying the correct classes to your page elements, and you just use the name of the image in your class that you want to show up for your page element. SASS+Compass will handle the rest for you with it's amazingly carbonated-sugary magic. Each time this compiles, it'll generate your sprite image as necessary, and do all your CSS heavy lifting!

So now, go get something carbonated to sip on, and get to work theming out your awesome Sprite-enabled SASSy site!!

For more fun and in-depth reading, check out this amazing SASS sprites tutorial, which gets into a lot more details and shows you how to do EVEN MORE amazing things with these things! --> http://compass-style.org/help/tutorials/spriting/

Topics: Sprites, SASS