Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
CoffeeScript CSS
branch: develop

This branch is 21 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
tasks
test
Gruntfile.coffee
README.md
index.coffee
package.json

README.md

Usage

File placements

path/to
    |- img
    |    |- icons
    |    |    |- twitter.png
    |    |    |- facebook.png
    |    |    `- gplus.png
    |    `- images
    |        |- twitter.png
    |        |- facebook.png
    |        `- gplus.png
    |
    `- css/example.styl

Setting

grunt.loadNpmTasks 'grunt-stylsprite'
stylspritePlugin = require 'grunt-stylsprite'

Stylsprite-Task Options

stylsprite:
    options:
        rootPath:"Document/Root/Dir"
        pixelRatio:1 #<- default pixel ratio. default 1. Retina 2.

Stylsprite-Plugin Arguments

stylus:
    use:[stylspritePlugin("Target/CSS/Dir")]

Grunt task - Multiple Mode

stylsprite:
    options:
        rootPath:'path/to'
    simple:'path/to/img/**/*'
stylus:
    options:
        use:[stylspritePlugin('path/to/css')]
    index:
        files:['path/to/css/example.css':'path/to/css/example.styl']

Yield

Generate path/to/img/icons-xxxx.png and path/to/img/images-xxxx.png

Usage in path/to/css/example.styl

.twitter
    stylsprite url('../img/icons/twitter.png')

and Retina support

.twitter
    stylsprite url('../img/icons/twitter.png'),2

Grunt task - All In One Mode

stylsprite:
    options:
        rootPath:'path/to'
    allinone:
        files:['test/src/img/allinone.png':'test/src/img/**/*']
stylus:
    options:
        use:[stylspritePlugin('path/to/css')]
    index:
        files:['path/to/css/example.css':'path/to/css/example.styl']

Yield

Generate path/to/img/allinone.png

Usage in path/to/css/example.styl

.twitter
    stylsprite url('../img/allinone/icons/twitter.png')

and Retina support

.twitter
    stylsprite url('../img/allinone/icons/twitter.png'),2
Something went wrong with that request. Please try again.