Creating CSS Image Sprite with Compass

By . in Web Design. Updated on .

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.

Recommended Reading: Syntactically Awesome Stylesheets: Using Compass In Sass

Starting Compass

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 this tool. Compass integrates this feature in the Function. Let’s say we have the following icons under images/browsers/<images>.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.

image sprite
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 $<map>-layout: horizontal; or $<map>-layout: horizontal; replace the <map> with the folder name where you saved the images.

Horizontal

$browsers-layout:horizontal;
@import "browsers/*.png";
image sprite horizontal

Diagonal

$browsers-layout:vertical;
@import "browsers/*.png";
image sprite diagonal

Adding Image in the Stylesheet

Once we have done combining the image, we add the image in the stylesheet through the background image. Traditionally we will do it this way.

.chrome { 
	background-position: 0 0; width: 128px; height: 128px; 
} 
.firefox { 
	background-position: 0 -133px; width: 128px; height: 128px; 
} 
.ie { 
	background-position: 0 -266px; width: 128px; height: 128px; 
} 
.opera { 
	background-position: 0 -399px; width: 128px; height: 128px; 
} 
.safari { 
	background-position: 0 -532px; width: 128px; height: 128px; 
}

In Compass, we have a couple of ways that are much simpler. First, we can generate something like those CSS rules with this syntax @include all-<map>-sprites;. Replace the <map> with the folders where we store the images.

@include  all-browsers-sprites;

This line above when compiled to regular CSS generates the background image definition as well as each of the position, as shown below.

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {
  background: url('/images/browsers-sad8e949931.png') no-repeat;
}
.browsers-chrome {
	background-position: 0 0;
}
.browsers-firefox {
	background-position: 0 -128px;
}
.browsers-ie {
	background-position: 0 -256px;
}
.browsers-opera {
	background-position: 0 -384px;
}
.browsers-safari {
	background-position: 0 -512px;
}

Or, we can also add background image individually to particular selectors with this syntax @include <map>-sprite(image-naem);; as in previous codes replace the <map> with the folder where we store these images. Here is an example.

li {
	@include browsers-sprite(safari);
}

Then, Compass is clever enough to identify the background position, without us having to specify it explicitly. In regular CSS, that line above will turn into

.browsers-sprite, li {
  background: url('/images/browsers-sad8e949931.png') no-repeat;
}
li {
	background-position: 0 -512px;
}

Specifying Container Dimension

The last thing we need to do is specifying the container height and width that contain the image. We commonly do it in traditional way by manually inspecting the image width and height (most likely through image info or image properties).

With Compass, we can utilize this function <map>-sprite-height(image-name) or <map>-sprite-width(image-name) to retrieve the image width and height. In this example, we will retrieve one of the image width and height and store the value variables as well assign the background image with @include directive.

$height: browsers-sprite-height(safari);
$width: browsers-sprite-width(safari);
li {
	display: inline-block;
	height: $height;
	width: $width;
	@include browsers-sprite(safari);
}

When we compile these codes above, it turns into the following in regular CSS.

.browsers-sprite, li {
	background: url('/images/browsers-sad8e949931.png') no-repeat;
}
li {
	display: inline-block;
	height: 128px;
	width: 128px;
	background-position: 0 -512px;
}

Conclusion

There are actually a few other useful functions from Compass to use along with, but these are all the essential functions to create CSS Image Sprite with Compass. Still, if you are unfamiliar with this subject, we reccommend you to follow our previous post series about Sass and Compass. We hope you find this post to be useful.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail