sprite-magic-importer
Custom node-sass importer for create CSS Sprites like Magic Imports of the Compass.
Input
; .foo
Output
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
- default:
$sprite-selectors
- default:
hover, target, active, focus
- default:
$default-sprite-separator
- default:
-
- default:
$<map>-sprite-base-class
- default:
.<map>-sprite
- default:
$<map>-sprite-dimensions
- default:
false
- default:
$<map>-class-separator
- default:
$default-sprite-separator
- default:
Usage
Create configure script.
importer.js
var SpriteMagicImporter = ; moduleexports = ;
build.js
Plese note: You cannot use sass.renderSync
with this importer.
var sass = ;var importer = ; sass;
configure options
- project_path
string
- The path to the root of the project.- default:
process.cwd()
- default:
- http_path
string
- The path to the project when running within the web server.- default:
/
- default:
- sass_dir
string
- The directory where the sass stylesheets are kept. It is relative to the project_path.- default:
sass
- default:
- css_dir
string
- The directory where the css stylesheets are kept. It is relative to the project_path.- default:
stylesheets
- default:
- images_dir
string
- The directory where the images are kept. It is relative to the project_path.- default:
images
- default:
- 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
- default: http_path +
- http_stylesheets_path
string
- The full http path to stylesheets on the web server.- default: http_path +
/
+ css_dir
- default: http_path +
- 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
- default: os.tmpdir() +
- retina_mark
regexp
- Regular expression for detecting high resolution image from file name.- default:
/@(\d)x$/
- default:
- spritesmith
object
- This option is passed to theSpritesmith.run()
. - pngquant
object
- This option is passed to theimagemin-pngquant
.
CLI
node-sass --importer ./importer.js -o dist/css src/app.scss
Retina support
; // '*@2x.png' will not be imported
License
The MIT License (MIT)
Copyright (c) 2016 Takayuki Irokawa