compass/doc-src/content/help/tutorials/spriting/sprite-layouts.markdown

title	layout	crumb	classnames
Sprite layouts	tutorial	Sprite layouts	tutorial

Sprite layouts

Vertical

@import "mysprite/*.png";

Example Output:

Horizontal

$mysprite-layout:horizontal;
@import "mysprite/*.png";

Example Output:

Notes:

• Responds to the same configuration options that vertical has.

Diagonal

$mysprite-layout:diagonal;
@import "mysprite/*.png";

Example Output:

Notes:

• Configuration options do not effect the layout
• This is incredibly resource intensive on the browser

Smart

$mysprite-layout:smart;
@import "mysprite/*.png";

Example Output:

Notes:

• Configuration options do not effect the layout
• Most efficient use of browser memory

Example icons from Open Icon Library and are released under public domain