Compass-Retina-Sprites

A mixin to create retina sprites with hover & active states

While building one the site for univeristy, I came across the need to use compass sprites with hover states on normal and retina devices. Not being able to find anything that would suite my needs, I forked a gist from this Gist and added hover & active parameters.

I created a utility mixin to allow compass for automatically generate sprites both for normal and retina devices, along css generation for hover and active states.

Features

• Generate Normal & Retina Sprites
• Optional Hover & Active States
• Optional Sprite Spacing/Padding

Repo contains demo example as well just download and watch the directory using compass watch command in terminal.

Instructions

• Drop __RetinaSprites.scss into your location in sass folder
• Now, link that file in your main file, @import "YOURFOLDERNAME/retina-sprites"; eg. styles.scss
• Both files are provided before demo folder
• SASS settings is Setup.Now let's Create two folders in your images folder. For my example I've created "sprites" for 1x sprites and "sprites2x" for 2x sprites. In my example you can see that Compass/Sass is creating both Sprites in main images folder. Drop your photo's in these folders,

Remember!!

• They should have the same file name.
• Also make sure the retina images are divisible by 4. If they are not, it can lead to problem like clipping and shifting.

In your SCSS file, declare where your sprites are located. In this example I have my social icons in a separate scss file, and I place the following in the top of this file.

$sprites: sprite-map("sprite/*.png", $spacing: 1px); // import normal sprites
$sprites2x: sprite-map("sprite2x/*.png", $spacing: 2px); // import 2x sprites

If you would like to add padding to your sprites, use the spacing parameter and double the value for the retina version:

$sprites: sprite-map("sprite/.png", $spacing: 1px); // import normal sprites, 1px padding space $sprites2x: sprite-map("sprite2x/.png", $spacing: 2px); // import 2x sprites, 2px padding space

Advance Options

/* Creates the sprite maps and placeholder classes used by the other mixins. */ @include generate-sprite-map($sprites, $sprites2x, $with-dimensions: true);

/* Allows for pre-defined auto-generated classes. */ @include retina-sprite-classes($sprites, $sprites2x, $prefix: 'sprite-', $with-dimensions: true);

where,

• $sprites, is the 1x Sprite Folder which means (Normal Folder).
• $scprites2x, is the 2x Sprite Folder which is Retina Display Icons.
• $prefix, is fix word you will be added to every icons of sprite eg:

< a class="sprite-googleplus" href="https://plus.google.com/u/0/+danishraza">< /a>

• $with-dimensions, represent that dimension for retina icons is corrent, Boolean is required to use for that Option.
• more option are available on reading mixin file.

Almost ready to rock and roll!! Create a class for your sprite, and use an include to generate it.

 $sprites: sprite-map("sprite/*.png", $spacing: 1px); // import normal sprites
 $sprites2x: sprite-map("sprite2x/*.png", $spacing: 2px); // import 2x sprites
/* Creates the sprite maps and placeholder classes used by the other mixins. */
@include generate-sprite-map($sprites, $sprites2x, $with-dimensions: true);
/* Allows for pre-defined auto-generated classes. */
@include retina-sprite-classes($sprites, $sprites2x, $prefix: 'sprite-', $with-dimensions: true);

Hope, This help someone. Thanks for reading. Cheers!