Stylus-Lemonade
Stylus-Lemonade is a plugin for Node.js Stylus
which allows you to use functions like sprite-position()
, sprite-height()
, image-width()
, sprite-map()
, etc.
within your *.styl
markup to automatically fetch images and generate css sprites at render time.
If you come from the Ruby on Rails community, you will immediately recognize conventions from Spriting
with Compass/SASS, originally Lemonade.
Install
sudo apt-get install libgd2-xpm-dev
npm install stylus-lemonade
Use in Javascript
For the very latest and most comprehensive example, see test/integration/server.js .
var stylus = require ( ' stylus ' ) ;
stylus ( markup_input )
. plugin ( ' stylus-lemonade ' )
. render ( function ( err , css_output ) {
console . log ( css_output ) ;
} ) ;
Use in Stylus
For the very latest and most comprehensive examples, see test/fixtures/private/stylesheets/application.styl .
$ animated_flame = sprite - map( ' flame ' )
# flame
background : url ( sprite-url($animated_flame ) ) no-repeat
height : sprite - height( $ animated_flame , ' flame_a_0001 ' )
width : sprite - width( $ animated_flame , ' flame_a_0001 ' )
. flame-frame-1
background-position : sprite - position( $ animated_flame , ' flame_a_0001 ' ) ! important
. flame-frame-2
background-position : sprite - position( $ animated_flame , ' flame_a_0002 ' ) ! important
. flame-frame-3
background-position : sprite - position( $ animated_flame , ' flame_a_0003 ' ) ! important
. flame-frame-4
background-position : sprite - position( $ animated_flame , ' flame_a_0004 ' ) ! important
. flame-frame-5
background-position : sprite - position( $ animated_flame , ' flame_a_0005 ' ) ! important
. flame-frame-6
background-position : sprite - position( $ animated_flame , ' flame_a_0006 ' ) ! important
Will output CSS like this:
# flame {
background : url ( ../images/flame-4e9c94d3fa.png ) no-repeat ;
height : 512 px ;
width : 512 px ;
}
. flame-frame-1 {
background-position : 0 0 !important ;
}
. flame-frame-2 {
background-position : 0 -512 px !important ;
}
. flame-frame-3 {
background-position : 0 -1024 px !important ;
}
. flame-frame-4 {
background-position : 0 -1536 px !important ;
}
. flame-frame-5 {
background-position : 0 -2048 px !important ;
}
. flame-frame-6 {
background-position : 0 -2560 px !important ;
}
And the image will turn out like this:
Test