Please read my blog post on CSS sprites for Sass/Compass or have a look at the presentation 3 steps to make better and faster frontends (slides 23—37).
Usage (SCSS or Sass):
.fanta {
background: sprite-image("bottles/fanta.png");
}
.seven-up {
background: sprite-image("bottles/seven-up.png");
}
.coke {
background: sprite-image("cans/coke.png") no-repeat;
}
Output (CSS):
.fanta {
background: url('/images/bottles.png');
}
.seven-up {
background: url('/images/bottles.png') 0 -50px;
}
.coke {
background: url('/images/cans.png') no-repeat;
}
- Generates a sprite image for each folder (e. g. “bottles” and “cans”)
- Sets the background position (unless “0 0”)
- It uses the
images_dir
defined by Compass (just likeimage-url()
) - No Rake task needed
- No additional classes
- No configuration
- No RMagick required (but full support for PNG)
(1)
gem install lemonade
(2)
Now open your config.rb
(Compass cofiguration file) and add one line after this comment:
# Require any additional compass plugins here.
require "lemonade"
- Compass standalone finished
- Rails Sass integration finished
- Staticmatic integration finished
- Haml integration (with “:sass” filter): work in progress
You can pass an additional background position. It will be added to the calculated position:
.seven-up {
background: sprite-image("bottles/seven-up.png", 12px, 3px);
}
Output (assuming the calculated position would be “0 -50px” as shown above):
.seven-up {
background: url('/images/bottles.png') 12px -47px;
}
If you need empty space around the current image, this will add 20px transparent space above and below.
.seven-up {
background: sprite-image("bottles/seven-up.png", 0, 0, 20px);
}
This one adds 20px above, 30px below:
.seven-up {
background: sprite-image("bottles/seven-up.png", 0, 0, 20px, 30px);
}
Right aligned images are possible:
.seven-up {
background: sprite-image("bottles/seven-up.png", 100%, 4px);
}
The original image will be placed on the right side of the sprite image. Use this, if you have a link with an arrow on the right side (like Apple).
For 1 pixel wide type repeats, you can fill out the image so repeat-x will work.
background: sprite-image("bottles/vertical-orange.png", "{:repeat => true}");
- Fork the project.
- Make your feature addition or bug fix.
- Add tests for it. This is important so I don't break it in a future version unintentionally.
- Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
- Send me a pull request. Bonus points for topic branches.
If you want to use Lemonade with Rails 3 Please use this compass and haml versions in your Gemfile
gem 'compass', '~> 0.10.2'
gem 'haml-edge', '~> 3.1.49', :require => 'haml'
- Chris Hoffman
- Jason Weathered (twitter)
- Tobias Kraze
- Sebastian Deutsch (twitter)
- Nico Hagenburger (twitter)
Copyright (c) 2010 Nico Hagenburger. See MIT-LICENSE for details. Follow me on twitter.