Create Sprites Using Lemonade In Compass

Create Sprites Using Lemonade In Compass

I have a ton of images, now what?

By now, I would think most of you know how to use sprites. They are extremely useful, and keep the number of http requests down to a minimum. You have this png file that you work on in Photoshop, and you keep adding to it, saving it and whatever else. Get’s time consuming right? At least a little, so shut up you nay sayers. Wouldn’t it be great if there was an easier way? Damn straight!

Thirsty? Drink some Lemonade!

Lemonade for Compass - Sass FrameworkWell Compass makes it easy now, and you don’t need to use Photoshop to do it! Compass has merged with Lemonade to make doing this a cinch. With each new iteration of this framework, something awesome gets added, and this is just plain cool. Now you can take a bunch of images you have and make a sprite on the fly with them. Here is how you go about it.

Let’s get Sassy

Let’s say you have four icons in an icon folder, within your images folder (/images/icon/icon1.png), and they are all 32×32 pixels. So you have icon1.png, icon2.png, icon3.png, and icon4.png. Personally I think the best way to accomplish creating the sprite is by using the ‘magic’ icon-sprite mixin, which you would use like this:

@import "icon/*.png";
 
.myClass {
  .icon1    { @include icon-sprite(icon1);    }
  .icon2   { @include icon-sprite(icon2);   }
  .icon3   { @include icon-sprite(icon3);   }
  .icon4 { @include icon-sprite(icon4); }
}

That crap compiles to this CSS:

.icon-sprite,
.myClass .icon1,
.myClass .icon2,
.myClass .icon3,
.myClass .icon4 { background: url('/images/icon-8b38262b80.png') no-repeat; }
 
.myClass .icon1 { background-position: 0 -64px; }
.myClass .icon2 { background-position: 0 -32px; }
.myClass .icon3 { background-position: 0 -96px; }
.myClass .icon4 { background-position: 0 0;}

If you want to create space between each of those icons, put this above your import, where the 20px can be anything you want:

$icon-spacing: 20px.

The real magic!

I did two tests. One with the images at the same size (32×32 pixels), and then I added an icon that was 200px by 72px. The sprite gets its width from the image in the sprite that is the widest, and the CSS output shows the adjustments in the background position. It takes any guesswork or math that you have to do when you create sprites the normal way and write your own styles. This can save a lot of time if you have images that are going to be used as a block of its own (meaning not in something like an li where other images from the sprite can bleed through.

There are a few different methods of using Lemonade, or really the sprite function of Compass now that it is integrated. If you are interested, you can check them out at the Spriting with Compass page. There are also a ton of ways to customize the sprite.

Any issues?

Two, one of which that you just have to be aware of when you are making the site live. If you change the sprite at all, if gives you a new png, so be aware of that and make sure you have the proper one uploaded. The second issue is, while you can customize the sprites you generate, all of those options look like they could get confusing, and I would rather just make the sprite myself. If you generated a bunch of different sprites you could also end up with a ton of CSS. If you just need a basic sprite though, this is the way to go. Thanks to Chris Eppstein for adding Lemonade to Compass.

Coupon Code: webmachine

Tags: ,

Leave a Reply