CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop.
But, through all my experience of dealing with CSS Image Sprite, there is no other way that much easier than using Sprite Function for Compass. So, let’s take a look at how it works.
Before working with Compass codes, we need to create Compass project watch it. So, every time there is a change in the project including the images and the .scss, Compass will compile it into the proper form.
Let’s open your Terminal or Command Prompt (if you are on Windows), and run the following commands.
compass create /path/to/project
cd /path/to/project
compass watch
Combining Images
As we mentioned above, you can use Photoshop to manually join the images or you can also use some handy tools, such as SpriteBox. Compass integrates this feature in the Function. Let’s say we have the following icons under images/browsers/.png folders.
To join those icons in Compass, we can use @import rule and then direct it to the image folders followed by the image extension through the .scss stylesheet, like so
@import "browsers/*.png";
After saving the file, Compass will combine those images and generate new image files, as follows.
Layout Orientation
Furthermore, we can also set the sprite orientation. As you can see in the screenshot above, the images are arranged vertically by default. In case vertical orientation does not fit the circumstances, we can direct them horizontally or diagonally with the following variable $