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
|
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)
|
||||||
|
@ -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:
|
||||||
|
@ -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)
|
||||||
|
@ -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) {
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user