you can now inline sprite images using $<map>-inline:true; before calling the @import closes #611

This commit is contained in:
Scott Davis 2011-11-04 10:47:31 -04:00
parent 7334285950
commit bc3334bec9
5 changed files with 54 additions and 6 deletions

View File

@ -1,7 +1,7 @@
PATH
remote: .
specs:
compass (0.12.alpha.0.57f35d4)
compass (0.12.alpha.0.7334285)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)

View File

@ -9,6 +9,23 @@ module Compass::SassExtensions::Functions::Sprites
self[variable_name.to_s.gsub(/-/,"_")]
end
end
# Returns the system path of the sprite file
def sprite_path(map)
Sass::Script::String.new(map.name_and_hash)
end
Sass::Script::Functions.declare :sprite_path, [:map]
# Returns the sprite file as an inline image
# @include "icon/*.png";
# #{$icon-sprite-base-class} {
# background-image: inline-sprite($icon-sprites);
# }
def inline_sprite(map)
verify_map(map, "sprite-url")
map.generate
inline_image(sprite_path(map))
end
Sass::Script::Functions.declare :inline_sprite, [:map]
# Creates a Compass::SassExtensions::Sprites::SpriteMap object. A sprite map, when used in a property is the same
# as calling sprite-url. So the following background properties are equivalent:

View File

@ -41,9 +41,13 @@ module Compass
end
end
def name_and_hash
"#{path}-s#{uniqueness_hash}.png"
end
# The on-the-disk filename of the sprite
def filename
File.join(Compass.configuration.generated_images_path, "#{path}-s#{uniqueness_hash}.png")
File.join(Compass.configuration.generated_images_path, name_and_hash)
end
def relativize(path)

View File

@ -10,6 +10,7 @@ $<%= name %>-repeat: no-repeat !default;
$<%= name %>-prefix: '' !default;
$<%= name %>-clean-up: true !default;
$<%= name %>-layout:vertical !default;
$<%= name %>-inline: false !default;
<% if skip_overrides %>
$<%= name %>-sprites: sprite-map("<%= uri %>", $layout: $<%= name %>-layout, $cleanup: $<%= name %>-clean-up);
@ -35,10 +36,15 @@ $<%= name %>-layout:vertical !default;
// All sprites should extend this class
// The <%= name %>-sprite mixin will do so for you.
#{$<%= name %>-sprite-base-class} {
background: $<%= name %>-sprites no-repeat;
@if $<%= name %>-inline {
#{$<%= name %>-sprite-base-class} {
background-image: inline-sprite($<%= name %>-sprites);
}
} @else {
#{$<%= name %>-sprite-base-class} {
background: $<%= name %>-sprites no-repeat;
}
}
//sass functions to return the dimensions of a sprite image as units
<% [:width, :height].each do |dimension| %>
@function <%= name %>-sprite-<%= dimension %>($name) {

View File

@ -774,7 +774,9 @@ class SpritesTest < Test::Unit::TestCase
text-align:left;
background-position:0 0;
background-image:url('/colors-s58671cb5bb.png');
background-repeat:no-repeat;}
background-repeat:no-repeat;
}
.yellow {
text-indent:-119988px;
overflow:hidden;
@ -789,4 +791,23 @@ class SpritesTest < Test::Unit::TestCase
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
it "should inline the sprite file" do
css = render <<-SCSS
$colors-inline:true;
@import "colors/*.png";
@include all-colors-sprites;
SCSS
other_css = <<-CSS
.colors-sprite, .colors-blue, .colors-yellow {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAAAAACRhfOKAAAAHElEQVR42mM5wQADLP8JMRlIUIvE/IdgctLTNgCHDhEQVD4ceAAAAABJRU5ErkJggg==');
}
.colors-blue {
background-position:0 0;
}.colors-yellow {
background-position:0 -10px;
}
CSS
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
end