Categories

Standard and retina display sprites with compass – how to

First of all, if you are not using sass/compass yet – you definitely should start right now. There are plenty of resources on how to install compass on mac or PC. Myself, I’m using a mac app “Codekit”.
One of the of compass features that are especially compelling is “spriting”. With compass you simply place all your images in a folder and import them into your stylesheet.
In this post I’ll share with how I prepare my sprites in two “versions” for standard and retina display.
Click on the image below to see the demo (check it on your retina display).

Example 1 – button

Let’s prepare a button with three states normal, hover and target. I prepare the three states of buttons in two sizes (normal and doubled for retina display). I save the separate .pngs in two folders : button and button2x.
The button folder will contain : button.png, button-hover.png and button-target.png. Identically button2x will contain : button.png, button-hover.png and button-target.png.

You can create and work with sprites compass in two ways. The first one would be the import-based approach :@import "button/*.png"; @include all-button-sprites;
You can also specify a configurable variable before importing the sprite.

Honestly speaking, this is far more complicated than what I have imagined. I am still struggling to get the hang on this Standard and retina display sprites but hopefully, I will be able to do this. Thanks for the share btw.