Lemonade is deprecated from now on. I’m working on Compass Sprites with Chris Eppstein and Scott Davis from now on.
Generate CSS Sprites
on the Fly with Lemonade
Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files. All you need to write is:
background: sprite-image("icons/home.png"
);This will generate a sprite icons.png, insert the url(…) and calculate the background-position.
On the fly.
Everytime your Sass/SCSS file will be compiled.
Source (SCCS or 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;
}Result (CSS):
.logo {
background: url('/images/lemonade.png'
);
}
.lime {
background: url('/images/lemonade.png'
) 0 -26px;
}
.coffee {
background: url('/images/other-drinks.png'
) no-repeat;
}Examples
#1 Use an Offset for the Background-Position
You can provide an offset as 2nd (X) and 3rd (Y) parameter. The will be added to the calculated sprite background offset:
.lemonade-example-1 {
background: sprite-image("lemonade/example-1/blue-10x10.png"
, 10px, 2px) yellow no-repeat;
}
Result:
Some text
Generated sprite image:
#2 Space Between Sprite Images
Example #1 works well just because there’s only one image in the sprite. With two images, you would see a part of the other images (here the pink one) like this:
Some text
Generated image: 
To avoid this, you can add a 4th parameter which generates transparent space between the sprite images. The 4th sets the space before and after the current image. If you set both, th 4th creates space before, the 5th space after.
.lemonade-example-2-b {
background: sprite-image("lemonade/example-2-b/blue-10x10.png"
, 20px, 9px, 20px) yellow no-repeat;
}
Some text
Generated image:
Please note the 20px transparent space between pink and blue.
Installation
I’ve tested it with both Ruby 1.8.7 and 1.9.2.
It works with Haml/Sass 3.0.x.
But it depends on Compass 0.10.x.
You can integrate it in Rails 2.3.x and 3.0, Staticmatic or just run compass watch.
gem install lemonadeNow open your config.rb (Compass cofiguration file) and add one line after this comment:
# Require any additional compass plugins here.
require "lemonade"
Development, Support, Bugs
If you find any bug, please quote it at github. If you want to fix it by yourself, fork my project and send me a pull request.
You’ll find the source code at: http://github.com/hagenburger/lemonade Feel free to fork!
Have fun :)
Further Stuff
- Another CSS sprite generator for Sass by Richard Huang:
http://github.com/flyerhzm/css_sprite
(good<img>tag replacement; generates classes in own Sass file) - Beautiful icons used in examples by Yusuke Kamiyamane
- http://github.com/chriseppstein/compass—useful mixins and frameworks for Sass
- http://github.com/nex3/haml—Sass/SCSS language interpreter