compass retina sprite with placeholder

readme.md

Compass retina sprite with placeholder

Usage

Call the placeholder on the class or element you wish to add a background image to, like this:

@extend: %icon-NameOfImage;

Considerations

I have written this, since I was in dire need of lean sprite css. The standard output does not cut it.

Not only did not want the classes, I also did needed the files to be retina ready.

This is just a gist, so I leave out the part in which the media query negotiates the correct sprite (I hope to add it later).

The CSS is still in typical SASS fashion scattered across the CSS file:

1. declaration of all elements / classed using the bg-img
2. the output of %extend
3. all the other css written for each class

This is still suboptimal for performance, the the smallest output I have been able to find.

It would be better to use a "smart" layout, but sprite-position does not yield the correct positions in this case.

Any help for improvement is welcome!

_icons.scss

$disable-magic-sprite-selectors: true;
$icons-inline: false;
$icons-sprite-base-class: "%icons-sprite";
$icons-layout: vertical; //must in order to get the correct position! -> this appears to be a bug in Compass 0.12.2; @include background-size gives the correct posititon, $var-sprite-position($img) does not.
$icons: sprite-map("folder-name/*.png");
@import "folder-name/*.png";

@each $img in sprite-names($icons) {
  %icon-#{$img} {
		@extend %icons-sprite;
		height: ceil(image-height(sprite-file($icons, $img)) / 2);
		width: ceil(image-width(sprite-file($icons, $img)) / 2);
		$x: nth(sprite-position($icons, $img), 1);
		$y: nth(sprite-position($icons, $img), 2);
		background-position: $x/2 $y/2;
		background-size: ceil($totalWidthOfSprite)/2; // I have not found a way to correct this...
	}
}