you can now inline sprite images using $<map>-inline:true; before calling the @import closes #611
This commit is contained in:
parent
7334285950
commit
bc3334bec9
@ -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)
|
||||
|
@ -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:
|
||||
|
@ -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)
|
||||
|
@ -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} {
|
||||
@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) {
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user