Skip to content

Instantly share code, notes, and snippets.

@chriseppstein

chriseppstein/inline_example.scss

Created November 2, 2011 14:52
Show Gist options
  • Save chriseppstein/1333822 to your computer and use it in GitHub Desktop.
Save chriseppstein/1333822 to your computer and use it in GitHub Desktop.
Download ZIP
generate an inline sprite.
Raw
inline_example.scss
@include "icon/*.png";
#{$icon-sprite-base-class} {
background-image: inline-sprite($icon-sprites);
}
Raw
inline_sprites.rb
# copy this to your compass config.
module Sass::Script::Functions
def sprite_path(map)
Sass::Script::String.new("#{map.path}-s#{map.uniqueness_hash}.png")
end
declare :sprite_path, [:map]
def inline_sprite(map)
verify_map(map, "sprite-url")
map.generate
inline_image(sprite_path(map))
end
declare :inline_sprite, [:map]
end
@scottdavis
Copy link

we want this in core?

@chriseppstein
Copy link
Author

it's been asked for a couple times. I'm not opposed. I guess there would be some config variable that would cause the background-image to get set like this after the other background image is set to the url (so it can degrade).

@chriseppstein
Copy link
Author

I used to think it was kind of pointless, but @hcatlin pointed out that a sprite map is smaller than the individual files so there is some win here.

@scottdavis
Copy link

how about a config variable to toggle the desired output? like $icon-inline:true;

@chriseppstein
Copy link
Author

chriseppstein commented Nov 4, 2011 via email

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