Wondering what’s next for npm?Check out our public roadmap! »

    @curiousmedia/sass-sprites

    1.1.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i @curiousmedia/sass-sprites

    DownloadsWeekly Downloads

    2

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    173 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar