PostCSS Easysprite 
Usage
Just append #spritename to the end of the image url. No complicated mechanism or strict folder structure is needed.
Retina
The plugin moves all retina images with any ratio to a separate sprite. To achieve this all retina images should be declared with a @2x suffix (where number is the image ratio.)
Caching/performance
Projects with a large number of sprites can take a long time to compile. The help with this, the plugin checks files against a md5 hash to only compile new/changed sprites. This does not yet work for the first time a sprite is generated.
Relative/absolute paths
The plugin supports both relative and absolute paths on input file, but can currently only generate relative paths on output file.
Plugin options
| Option | Description | Default |
|---|---|---|
imagePath |
Path for resolving absolute images. | process.cwd() |
spritePath |
Path to use for saving the generated sprites file(s). | process.cwd() |
stylesheetPath |
Path for resolving relative images (overriding options, css file folder used for default.) | '' |
padding |
The amount of space in pixels to put around images in the sprite. Note: This value will be scaled proportionally for retina images. | 20 |
outputDimensions |
Whether to also output the pixel height and width of the image. |
false |
algorithm |
The layout algorithm spritesmith should use. | binary-tree |
outputStylesheetPath |
Optional. Path of the final CSS file. If defined, sprite urls are relative to this path. | undefined |
Input example
.arrow {
background-image: url('images/arrow-next.png#elements');
}
.arrow:hover {
background-image: url('images/arrow-next--hover.png#elements');
}
@media only screen and (min-resolution: 1.5dppx) {
.arrow {
background-image: url('images/arrow-next@2x.png#elements');
}
.arrow:hover {
background-image: url('images/arrow-next--hover@2x.png#elements');
}
}
@media only screen and (min-resolution: 2.5dppx) {
.arrow {
background-image: url('images/arrow-next@3x.png#elements');
}
.arrow:hover {
background-image: url('images/arrow-next--hover@3x.png#elements');
}
}Output example
.arrow {
background-image: url(sprites/elements.png);
background-position: 0 0;
}
.arrow:hover {
background-image: url(sprites/elements.png);
background-position: -48px 0;
}
@media only screen and (min-resolution: 1.5dppx) {
.arrow {
background-image: url(sprites/elements@2x.png);
background-position: 0 0;
background-size: 76px 27px;
}
.arrow:hover {
background-image: url(sprites/elements@2x.png);
background-position: -48px 0;
background-size: 76px 27px;
}
}
@media only screen and (min-resolution: 2.5dppx) {
.arrow {
background-image: url(sprites/elements@3x.png);
background-position: 0 0;
background-size: 76px 27px;
}
.arrow:hover {
background-image: url(sprites/elements@3x.png);
background-position: -48px 0;
background-size: 76px 27px;
}
}PostCSS Usage
postcss([
easysprite({
imagePath: './public/images',
spritePath: './public/sprites',
}),
]);See the PostCSS docs for examples of your particular environment.
