sprite-magic-importer

Custom node-sass importer for create CSS Sprites like Magic Imports of the Compass.

Input

@import "icons/*.png";
@include all-icons-sprites(true);

.foo {
    .bar {
        @include icons-sprite(chrome);
    }
}

Output

.icons-sprite, .icons-chrome, .icons-firefox, .icons-ie, .foo .bar {
  background-image: url("/images/icons.png?_=bfa627d");
  background-repeat: no-repeat;
}

.icons-chrome {
  background-position: -32px 0;
  width: 32px;
  height: 32px;
}

...snip...

.foo .bar {
  background-position: -32px 0;
}

.foo .bar:hover, .foo .bar.chrome-hover {
  background-position: 0 0;
}

See: Example

Supported Compass features

Mixins and Functions

• @mixin all-<map>-sprites()
• @mixin <map>-sprite()
• @mixin <map>-sprite-dimensions()
• @function <map>-sprite-width()
• @function <map>-sprite-height()

Magic Selectors

Supported are hover, target, active, and focus.

Customization Options

• $disable-magic-sprite-selectors
  • default: false
• $sprite-selectors
  • default: hover, target, active, focus
• $default-sprite-separator
  • default: -
• $<map>-sprite-base-class
  • default: .<map>-sprite
• $<map>-sprite-dimensions
  • default: false
• $<map>-class-separator
  • default: $default-sprite-separator

Usage

Create configure script.

importer.js

var SpriteMagicImporter = require('sprite-magic-importer');

module.exports = SpriteMagicImporter({
    // http://compass-style.org/help/documentation/configuration-reference/
    sass_dir:                   'src/sass',
    images_dir:                 'src/images',
    generated_images_dir:       'dist/images',
    http_stylesheets_path:      '/css',
    http_generated_images_path: '/images',

    // spritesmith options
    spritesmith: {
        algorithm: `diagonal`,
        padding: 2
    },

    // imagemin-pngquant options
    pngquant: {
        quality: 75,
        speed: 10
    }
});

build.js

Plese note: You cannot use sass.renderSync with this importer.

var sass = require('node-sass');
var importer = require('./importer');

sass.render({
    ...
    importer: importer
    ...
});

configure options

• project_path string - The path to the root of the project.
  • default: process.cwd()
• http_path string - The path to the project when running within the web server.
  • default: /
• sass_dir string - The directory where the sass stylesheets are kept. It is relative to the project_path.
  • default: sass
• css_dir string - The directory where the css stylesheets are kept. It is relative to the project_path.
  • default: stylesheets
• images_dir string - The directory where the images are kept. It is relative to the project_path.
  • default: images
• generated_images_dir string - The directory where generated images are kept. It is relative to the project_path.
  • default: images_dir
• http_generated_images_path string - The full http path to generated images on the web server.
  • default: http_path + / + generated_images_dir
• http_stylesheets_path string - The full http path to stylesheets on the web server.
  • default: http_path + / + css_dir
• use_cache boolean - Set this to true to speed up using the cache.
  • default: true
• cache_dir string - The full path to where cache of temporary stylesheets are kept.
  • default: os.tmpdir() + /sprite-magic-importer
• retina_mark regexp - Regular expression for detecting high resolution image from file name.
  • default: /@(\d)x$/
• spritesmith object - This option is passed to the Spritesmith.run().
  • See: https://www.npmjs.com/package/spritesmith#spritesmithrunparams-callback
• pngquant object - This option is passed to the imagemin-pngquant.
  • See: https://www.npmjs.com/package/imagemin-pngquant#options

CLI

node-sass --importer ./importer.js -o dist/css src/app.scss

Retina support

@import "icons/*.png";              // '*@2x.png' will not be imported
@include all-icons-sprites(true);

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    @import "icons/*@2x.png";
    @include all-icons-sprites();
}

License

The MIT License (MIT)

Copyright (c) 2016 Takayuki Irokawa