Created
September 18, 2013 18:44
-
-
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)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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); | |
} | |
} |
You're welcome, and thank you too! That will come in handy.
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
Thanx for this one!! I have added a version with HiDPI support.