Retina display sprites with Sass & Compass

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.

Reference: http://compass-style.org/reference/compass/utilities/sprites/

Zip archive contents

Zip archive contents

 

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

Download a working example
Retina sprites for Compass.zip

 

Source code:

SCSS


/* general css definitions for an unsorted list */

.my-sprite-list-class{
display:table;
height: 70px;
padding: 8px 0 0;
text-align:center;
}
.my-sprite-list-class li{
display:inline-block;
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) */
display:block;
margin:auto;
}

// 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
@media
(-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”;
$myicons-2x-layout:smart;
@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);
}
}

HTML

Icon set 1

Icon set 2

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