@curiousmedia/sass-sprites
v1.1.1
Published
SASS mixins for retina, scalable sprite sheets.
Downloads
5
Keywords
Readme
Sprite Forge
SASS mixins for retina, scalable sprite sheets.
Example
@import 'sass-numbers';
@import 'sprite-forge';
.sprite {
@include sf-sprite(
(
$x, //X coordinate of sprite
$y, //Y coordinate of sprite
$width, //Width of sprite
$height, //Height of sprite
$total-width, //Width of sprite sheet
$total-height, //Height of sprite sheet
$image //Image path
),
$unit //Can be 'px' (default) or 'em'. Determines units for x, y, width, height, background-size, and background-offset.
$scale //0.5 (default) will scale sprites by 50%. 1 will display sprites at original size.
)
}
Grunt-Spritesmith Example
This mixin can work with any sprite sheet generator that can generate SASS map variables.
This library comes with a pre-configured template for Grunt Spritesheet. Check out /demo
for a fully functioning Sprite Forge and Grunt-spritesmith integration.
Grunt config
'sprite': {
'example': {
'src': 'images/*.png', //Path to images
'dest': 'example-sprites.png', //Destination of compiled sprite
'destCss': '_example-sprites.scss', //Destination of compiled SASS document
'cssFormat': 'scss',
'algorithm': 'top-down', //Top-down yields the most consistent results, however, other algorithms will work
'cssTemplate': 'sprites.handlebars', //Reference to handlebars template in src folder
'padding': 4, //Padding to yield consistent results
'cssVarMap': function (sprite) {
sprite.spriteName = 'example-sprites'; //Prefix for sprite sheet variables
}
}
}
This will output a compiled sprite image (example-sprites.png
) and SCSS document (_example-sprites.scss
) based off custom handlebars template (src/grunt-spritesmith/sprites.handlebars
). The compiled SCSS document contains map variables (name format: sprite.spriteName
+ -
+ filename
) with data about each sprite. Each sprite map variable can be passed into sf-sprite
to generate the CSS sprite.
SASS
@import 'sass-numbers';
@import 'sprite-forge';
@import 'example-sprites';
.example {
@include sf-sprite($example-sprites-sprite-name);
}