sprite-magic-importer

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

Input

1@import "icons/*.png";
2@include all-icons-sprites(true);
3
4.foo {
5    .bar {
6        @include icons-sprite(chrome);
7    }
8}

Output

1.icons-sprite, .icons-chrome, .icons-firefox, .icons-ie, .foo .bar {
2  background-image: url("/images/icons.png?_=bfa627d");
3  background-repeat: no-repeat;
4}
5
6.icons-chrome {
7  background-position: -32px 0;
8  width: 32px;
9  height: 32px;
10}
11
12...snip...
13
14.foo .bar {
15  background-position: -32px 0;
16}
17
18.foo .bar:hover, .foo .bar.chrome-hover {
19  background-position: 0 0;
20}
21

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

1var SpriteMagicImporter = require('sprite-magic-importer');
2
3module.exports = SpriteMagicImporter({
4    // http://compass-style.org/help/documentation/configuration-reference/
5    sass_dir:                   'src/sass',
6    images_dir:                 'src/images',
7    generated_images_dir:       'dist/images',
8    http_stylesheets_path:      '/css',
9    http_generated_images_path: '/images',
10
11    // spritesmith options
12    spritesmith: {
13        algorithm: `diagonal`,
14        padding: 2
15    },
16
17    // imagemin-pngquant options
18    pngquant: {
19        quality: 75,
20        speed: 10
21    }
22});

build.js

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

1var sass = require('node-sass');
2var importer = require('./importer');
3
4sass.render({
5    ...
6    importer: importer
7    ...
8});

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

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

Retina support

1@import "icons/*.png";              // '*@2x.png' will not be imported
2@include all-icons-sprites(true);
3
4@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
5    @import "icons/*@2x.png";
6    @include all-icons-sprites();
7}

License

The MIT License (MIT)

Copyright (c) 2016 Takayuki Irokawa