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 "icon/*.png";
$dropcap-layout:diagonal
@import "dropcap/*.png";
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