CoffeeSprites
CoffeeSprites is a plugin for Node.js CoffeeStylesheets
which allows you to use functions like sprite_position()
, sprite_height()
, image_width()
, sprite_map()
, etc.
within your *.css.coffee
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.
Installation on Debian/Ubuntu
sudo apt-get install libgd2-xpm-dev # libgd; the node-gd dependency sudo apt-get install pngcrush # optional; helps compress PNG npm install coffee-sprites
Use
CoffeeStylesheets = require 'coffee-stylesheets'engine = format: true CoffeeSprites = require __dirname + 'coffee-sprites'engineuse image_path: __dirname + '/precompile/assets/sprites/' sprite_path: __dirname + '/static/public/assets/' sprite_url: '/assets/' = -> body -> background '#eee' color '#333' margin '20px' wigi = sprite_map 'wigi' spacing: 10 s '#wigi'-> background "url() no-repeat" height sprite_height wigi'fly-3' width sprite_width wigi'fly-3' for iv of 'walk-1 walk-2 walk-3 run-1 run-2 run-3 fly-1 fly-2 fly-3 fall jump'split ' ' s '#wigi.wigi-'+i-> background_position sprite_position wigiv css = enginerender stylesheet fswriteFileSync __dirname + '/static/public/assets/application.css'css
Will output CSS like this:
and CoffeeSprites will produce output like this:
For the latest and most comprehensive examples of input, see ./test/fixtures/precompile/assets/.
Test
npm test # build coffee, run mocha unit test, run chrome browser integration test