archive web-coding

Retina display sprites with Sass & Compass

Create and maintain sprite-maps in various resolutions.

The code below allows you to automatically create and easily maintain sprite maps for both standard-resolution and high-resolution screens keeping CSS definitions to a required minimum.

From my small research I learned that around 30% of all visitors to my website has devices equipped with high resolution displays today. I said hey! using only a 1x images for UI is like preparing for litho-print in 150 dpi, which would be a really lame practice.

In general, assuming you’re familiar with CodeKit, SCSS and all that fancy, front-end-development stuff, all you need to do is create two folders for your images e. g. ‘icons’ and ‘icons-2x’ drop your images there – doesn’t matter if the images are different sizes sprites’ sizes vary, as long as the names are correct, and let the magic of Sass / Compass do the rest.

Naming of image files follow the Compass magic selectors standard eg. my-icon.png, my-icon_hover.png etc.


Zip archive contents
Zip archive contents


View the script in action:
(trust-mark logos at the bottom of page)

Download a working example
Retina sprites for


Source code:


/* general css definitions for an unsorted list */

height: 70px;
padding: 8px 0 0;
.my-sprite-list-class li{
margin:0 20px;
.my-sprite-list-class li a {
text-indent: 100%; white-space: nowrap; overflow: hidden; /* replaces text with image (SEO & screen-reader friendly) */

// import utilities

@import “compass/utilities/sprites”;
@import “str_replace”;

// settings for ‘sprite generator’

// customisation:
// .my-sprite-list-class – base class for your sprites container (ul, div etc)
// myicons – folder for standard resolution images and also a first part of the class name for each of the sprites containers, the second part of the class name will be your image file name
// myicons-2x – folder for high resolution images

$myicons-sprite-base-class: “.my-sprite-list-class li a”;
$myicons-layout: smart;
$myicons-sprite-dimensions: true;
@import “myicons/*.png”;

.my-sprite-list-class li a {
background-size: image-width(sprite-path($myicons-sprites)) image-height(sprite-path($myicons-sprites));

// ***NOTE ‘.my-sprite-list-class li a’ definition is generated 3 times here, I dont have a clue how to put it together in one definition but hey, it is simpler than repeating background-image in each of the sprites as the Compass ‘all-my-sprites’ does

// now simply wrap the @x2 sprites-generating in a standard media query that overwrites ‘.my-sprite-list-class li a’ definition with an updated sprite-map image as in a standard CSS semantic
(-webkit-min-device-pixel-ratio: 1.3),
( min–moz-device-pixel-ratio: 1.3),
( -o-min-device-pixel-ratio: 2/1),
( min-device-pixel-ratio: 1.3),
( min-resolution: 120dpi),
( min-resolution: 1.3dppx) {

$myicons-2x-sprite-base-class: “.my-sprite-list-class li a”;
@import “myicons-2x/*.png”;

/* classes for each of the sprites */
// uses custom str-replace function as the magic selectors will not work

@each $i in sprite_names($myicons-sprites){
.my-sprite-list-class li a.myicons-#{str-replace($i, ‘_’, ‘:’)}{ // customise .my-sprite-list-class li a.myicons- to suit your project
background-position: sprite-position($myicons-sprites, $i);
@include sprite-dimensions($myicons-sprites, $i);


Icon set 1

Icon set 2

Feel free to post your suggestions on how to improve this solution.

Leave a Reply