Skip to content

Instantly share code, notes, and snippets.

View othersmallcities's full-sized avatar
making things more accessible

Philipp Tautz othersmallcities

making things more accessible
View GitHub Profile
@othersmallcities
othersmallcities / _icons.scss
Last active August 29, 2015 13:55 — forked from morewry/_icons.scss
compass retina sprite with placeholder
$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;
$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");
@mixin sprite-background($name) {
background-image: sprite-url($sprites);
background-position: sprite-position($sprites, $name);
background-repeat: no-repeat;
display: block;
height: image-height(sprite-file($sprites, $name));
width: image-width(sprite-file($sprites, $name));