Sprites from the year 5000


w/ Sass and Compass

Background



A sprite is multiple images combined into one. 

One file to download versus five = better load time


Setup

/assets/config.rb


! important
relative_assets = true

STRUCTURE




! important
sprites only work for .png files

SASS


$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;

RETINIze

Resources



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

Sprites

By Craig Freeman