Sprite Tutorial

Sorting

Default is none sprites will be orderd however they are recived from the file system

You can sort by:

• width
• height
• size
• name
• none

Example

$my-sprite-sort-by : 'width';

Default search direction is acending if you wish to sort decending prepend a !

$my-sprite-sort-by : '!width';

Sprite Layouts

Example:

$icon-layout:horizontal;
@import "https://compass-style.org/files/beta-sub/help/tutorials/spriting/icon/*.png";
$dropcap-layout:diagonal
@import "https://compass-style.org/files/beta-sub/help/tutorials/spriting/dropcap/*.png";

Vertical

@import "https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/mysprite/*.png";

Example Output:

Horizontal

$mysprite-layout:horizontal;
@import "https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/mysprite/*.png";

Example Output:

Notes:

• Responds to the same configuration options that vertical has.

Diagonal

$mysprite-layout:diagonal;
@import "https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/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 "https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/https://compass-style.org/files/beta-sub/help/tutorials/spriting/mysprite/*.png";

Example Output:

Notes:

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