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 PATH
remote: . remote: .
specs: specs:
compass (0.12.alpha.0.57f35d4) compass (0.12.alpha.0.7334285)
chunky_png (~> 1.2) chunky_png (~> 1.2)
fssm (>= 0.2.7) fssm (>= 0.2.7)
sass (~> 3.1) sass (~> 3.1)

View File

@ -9,6 +9,23 @@ module Compass::SassExtensions::Functions::Sprites
self[variable_name.to_s.gsub(/-/,"_")] self[variable_name.to_s.gsub(/-/,"_")]
end end
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 # 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: # as calling sprite-url. So the following background properties are equivalent:

View File

@ -40,10 +40,14 @@ module Compass
end end
end end
end end
def name_and_hash
"#{path}-s#{uniqueness_hash}.png"
end
# The on-the-disk filename of the sprite # The on-the-disk filename of the sprite
def filename 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 end
def relativize(path) def relativize(path)

View File

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

View File

@ -774,7 +774,9 @@ class SpritesTest < Test::Unit::TestCase
text-align:left; text-align:left;
background-position:0 0; background-position:0 0;
background-image:url('/colors-s58671cb5bb.png'); background-image:url('/colors-s58671cb5bb.png');
background-repeat:no-repeat;} background-repeat:no-repeat;
}
.yellow { .yellow {
text-indent:-119988px; text-indent:-119988px;
overflow:hidden; overflow:hidden;
@ -788,5 +790,24 @@ class SpritesTest < Test::Unit::TestCase
CSS CSS
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '') assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end 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 end