As web developers have become more concerned about browser performance a technique called “image spriting” has emerged that is designed to reduce the number of requests made to the server. As it turns out, fewer requests made the server (when there is no significant difference in the combined size of the files delivered) can make a big difference in how fast a page appears to download.
Image spriting works by combining a bunch of images (called “sprites”) into one large image (or “sprite sheet”) to significantly reduce the number of requests made to the server. Then, with clever use of background-position only part of the sprite sheet is revealed each time an image is needed.
Mixin for a Compass
(it is assumed that the already installed Ruby, compass and Sass)
Folder structure for compass of project
Configuration for ruby compilation
http_path = "../htdocs"
css_dir = http_path+"/f/css"
sass_dir = http_path+"/f/sass"
images_dir = http_path+"/f/i"
Encoding.default_external = "utf-8"
output_style = :nested
relative_assets = true
line_comments = false
preferred_syntax = :scss
When doing configure ruby on your project, you can run the compass watcher to keep your CSS files up to date as changes are made. For windows:
Mixins can be used to generate custom classes for all of your sprites automatically. The name of the mixin is based on the name of the image where the sprite sheet source images are located. In our example:
Notice that Compass has built the “icons-s8df5cbe487” image for us automatically. This is our sprite sheet. The name of the file is the name of our sprite sheet (in this case “icons”) plus a funny series of letters and numbers called a “hash.” The hash will change whenever you update the sprite sheet so that cached CSS will know to use the updated image.