Lemonade - Generates sprites on the fly with Compass and Sass

One of the best ways to optimize your stylesheets and improve your site performance is to use CSS sprites. A CSS sprite is the technique of stitching together many images into a larger image and managing the placement using CSS background positioning. The upside is you save many network calls for your image assets. The downside is the complexity of creating the sprite.

Enter Lemonade from Nico Hagenburger. Lemonade is a Compass plugin that creates CSS sprites on-the-fly without Photoshop or ImageMagick.

To install, just install the gem:

sudo gem install lemonade

and then add the plugin to your Compass config:

# in config.rb
require 'lemonade'

You’re then all set to start creating sprites in your Sass:

.logo {
  background: sprite-image("lemonade/lemonade-logo.png");
}
.lime {
  background: sprite-image("lemonade/lime.png");
}
.coffee {
  background: sprite-image("other-drinks/coffee.png") no-repeat;
}

which yields

.logo {
  background: url('/images/lemonade.png');
}
.lime {
  background: url('/images/lemonade.png') 0 -26px;
}
.coffee {
  background: url('/images/other-drinks.png') no-repeat;
}

Nifty. Check out some advanced features on Nico’s blog post.

Technically, a better name might have been Lymonade, but this project is refreshing just the same.

[Source on GitHub]