stylsprite
CSS sprites for Stylus. (right now .png only)
Usage with connect
options = src: 'test/src/stylus' dest: 'test/public/css' compile: stylspritemiddlewarecompile padding: 2; app;app;
Usage with Stylus files.
Just change any use of background-image like this ...
background-image: 'path/to/image.png')
... into ...
'path/to/image.png'))
Now all your background images will be automatically combined to sprites.
To specify that this background is for retina displays you can add a pixel-ratio argument:
'path/to/image.png'),2)
Root property for absolute urls
By default Stylsprite will lookup absolute urls images on the same location as the css files are generated.
To make sure that absolute paths like /img/myimg.png
are not loaded from /css/img/myimg.png
add it like this:
options = src: 'test/src/stylus' dest: 'test/public/css' root: 'test/public' padding: 2; app;app;
Imgsrc property to load images from a different location
By default Stylsprite will lookup images on the same location as the css files are generated.
Use imgsrc
to make load images from a different path:
options = src: 'test/src/stylus' dest: 'test/public/css' imgsrc: 'test/src/imgsrc' padding: 2; app;app;
OneStopOption
options = src: 'test/src/stylus' dest: 'test/public/css' imgsrc: 'test/src/imgsrc' padding: 2 onestop: true; app;// app.use('/css', stylus.middleware(options)); <- needlessness in onestop mode
Thanks for reading. :)