Be mindful that the @include statement's middle word needs to match the directory in the line before it.
This will take all the PNG files selected by the glob and concatenate them into a single file, but will not create the corresponding stylesheet.
Sprite Me is a bookmarklet that generates a sprite based on what it finds on the current page. Compact them into a grid, making the smallest size, dimensionally that you can.
So essentially you'd develop without using sprites at all, then use this to sprite things together at the end. The dimensional size of an image plays a role in how much memory the image will take up when being used, so the less the better.
I'm creating flag sprites, so I've named my directory flags and placed three PNGs in the directory.
In a new SCSS file that I've called `flags.scss` (the name here is not important), the following three lines will, in order, import Compass' sprite making tools, glob import the PNGs to be converted to sprites (notice that the path here does not include images/), and then generate the CSS for the sprites.
To compile sprites via command line, install css-sprite globally with: For more information on using css-sprite with Grunt or Gulp (or many other environments), head over to the project's repository on Git Hub.
Generating sprites with Compass takes some additional setup and maintenance, but if you're already using Compass, it fits in well with your existing workflow.
Sprite Cow is a hosted tool for generating a stylesheet corresponding to your sprites.If you're using a generation tool, they will generally make this choice for you.In some situations, it may actually make sense to lay out a sprite diagonally.If you end up laying out your own sprite, Sprite Cow is a good tool to help with the CSS generation part.If, for simplicity, you're going to pick one or the other, one way to do that is to look at the largest width and the largest height of your image files.