Sprites from the year 5000

Background

A sprite is multiple images combined into one.

One file to download versus five = better load time

/assets/config.rb

! important

relative_assets = true

! important

sprites only work for .png files

$icons-sprite: sprite-map("icons/*.png");

background: sprite($icons-sprite, tile-facebook) no-repeat;

outputs:

background: url('../img/icons/1x-sd02f8454e3.png') 0 -140px no-repeat;

Compass

http://compass-style.org/reference/compass/utilities/sprites/

By Craig Freeman