Web design: CSS image sprite with compass

CSS image sprite is a method of combining multiple images in an image file reduce HTTP requests and Web load performance improve. There are many ways and practical tools to do this, otherwise you can do it also traditionally with Photoshop.

However, through my whole experience of dealing with CSS image sprite, there is no other way, that much easier than with sprite function for compass. So, we take a look on the operation.

Reading tip: syntactically awesome stylesheets: compass in Sass

Before you work with compass codes, we need to create compass project. So, every time there is a change in the project, including the images and the .scss compass in the right shape is compile.

We open the terminal or command prompt (if you're on Windows), and run the following commands.

Compass create / path/to/projectcd / path/to/projectcompass watch

As mentioned above, you can join Photoshop manually the images, or you can also some handy tools like SpriteBox or SpriteMe. Compass integrated this feature into the function. Let us say we have the following Images/browser/PNG icons folder.

Icons by Futurosoft

To participate the symbols in the compass, we can use @import rule and start it on the photo sessions, followed by the enlargement of the image via the stylesheet .scss like so

@import "browser / * .png ';

After you save the file, compass will combine to generate these images and new image files as follows.

In addition, we can set the sprite alignment. As you can see in the screenshot above, the images are arranged vertically by default. In the event that a vertical orientation the circumstances does not fit, we can directly horizontally or diagonally with the following variables $

Horizontal

$browsers-layout:horizontal;@import "browser / * .png ';

Diagonal

$browsers-layout:vertical;@import "browser / * .png ';

If we combine the image have ready, we add the image in the style sheet with the background image. Traditionally, we will do it in 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;}

At Compass, we have a few options that are much easier. First we can generate @include something like the CSS rules using the following syntax all

@include browser sprites;

This line at the top than regular CSS compiled background image definition and each generates the position as shown below.

is sprite, is chrome-plated is-ie, is Opera, is Firefox, Safari {background: url('/images/browsers-sad8e949931.png') no-repeat;}.Browser chrome {background-position: 0 0;}.Browser-Firefox {background-position: 0 - 128px;}.Browser-ie {background-position: 0 - 256px;}.Opera browser {background-position: 0 - 384px;}.Browser-Safari {background-position: 0 - 512px;}

We can also add background image individually to specific selectors use this syntax @include

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

Compass is smart enough to the background-position, without it explicitly specify to identify. In regular CSS transformed this line at the top of

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

The last thing, that we need to do is to specify the container height and width, which contain the image. We often do it in the traditional way through manually to check the image width and height (probably due to image information or image properties).

With compass, we can this function

$height: Browser-sprite height (Safari); $width: Browser-sprite-width (Safari); Li {display: inline-block;} Height: $height; Width: $width;@include browsers-sprite(safari);}

When we compile the above code, the following in regular CSS is it.

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

There are actually a few other useful features of Compass together with use, but these are all essential functions to create CSS image sprite with compass. Still, if you're familiar with this topic, we recommend to follow our earlier post series about Sass and compass. We hope you find this post useful.

Graphic & Web Designer; approximately 2 years, works as a freelance designer been specializing in e-commerce for individual action. He shares his enthusiasts are contacted in Web design at the creatiface.com and on Twitter @creatiface

View the original article here