Skip to content

Instantly share code, notes, and snippets.

@morewry
Created September 18, 2013 18:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save morewry/6613650 to your computer and use it in GitHub Desktop.
Save morewry/6613650 to your computer and use it in GitHub Desktop.
Compass sprites generate placeholders instead of classes (newer version doesn't require listfiles.rb)
$disable-magic-sprite-selectors: true;
$icons-inline: true;
$icons-sprite-base-class: "%icons-sprite";
$icons-layout: smart;
$icons: sprite-map("icons/*.png");
@import "icons/*.png";
@each $img in sprite-names($icons) {
%icon-#{$img} {
@extend %icons-sprite;
@include icons-sprite-dimensions($img);
@include icons-sprite-position($img);
}
}
@othersmallcities
Copy link

Thanx for this one!! I have added a version with HiDPI support.

@morewry
Copy link
Author

morewry commented Feb 19, 2014

You're welcome, and thank you too! That will come in handy.

@morewry
Copy link
Author

morewry commented Mar 11, 2014

I also created a version with retina/2x support

Unfortunately, the simplest way and most transparent way to add support requires a class be used for the base class instead of a placeholder. However, the rules for that placeholder would be output in any event as soon as a single icon was utilized, so this doesn't create clutter in generated CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment