Skip to content

Easy sprites for postcss. Just append `#spritename` to the end of image url. No complicated mechanism or strict folder structure.

License

Notifications You must be signed in to change notification settings

glebmachine/postcss-easysprites

Repository files navigation

PostCSS Easysprite Build Status npm version Commitizen friendly

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.

About

Easy sprites for postcss. Just append `#spritename` to the end of image url. No complicated mechanism or strict folder structure.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published