@curiousmedia/sass-sprites

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);
}

Dependencies

sass-numbers