lemonade compatibility specs and functions
This commit is contained in:
parent
79d6e28cf5
commit
9dcab9e14b
@ -3,9 +3,8 @@ require 'chunky_png'
|
|||||||
module Compass::SassExtensions::Functions::Sprites
|
module Compass::SassExtensions::Functions::Sprites
|
||||||
SASS_NULL = Sass::Script::Number::new(0)
|
SASS_NULL = Sass::Script::Number::new(0)
|
||||||
|
|
||||||
def sprite_image(uri)
|
def generate_sprite_image(uri)
|
||||||
uri = uri.value
|
path, name = Compass::Sprites.path_and_name(uri.value)
|
||||||
path, name = Compass::Sprites.path_and_name(uri)
|
|
||||||
last_spacing = 0
|
last_spacing = 0
|
||||||
width = 0
|
width = 0
|
||||||
height = 0
|
height = 0
|
||||||
@ -48,12 +47,23 @@ module Compass::SassExtensions::Functions::Sprites
|
|||||||
end
|
end
|
||||||
output_png.save File.join(File.join(Compass.configuration.images_path, "#{path}.png"))
|
output_png.save File.join(File.join(Compass.configuration.images_path, "#{path}.png"))
|
||||||
|
|
||||||
|
sprite_url(uri)
|
||||||
|
end
|
||||||
|
|
||||||
|
def sprite_image(uri, x_shift = SASS_NULL, y_shift = SASS_NULL)
|
||||||
|
url = sprite_url(uri)
|
||||||
|
position = sprite_position(uri, x_shift, y_shift)
|
||||||
|
Sass::Script::String.new("#{url} #{position}")
|
||||||
|
end
|
||||||
|
|
||||||
|
def sprite_url(uri)
|
||||||
|
path, name = Compass::Sprites.path_and_name(uri.value)
|
||||||
image_url(Sass::Script::String.new("#{path}.png"))
|
image_url(Sass::Script::String.new("#{path}.png"))
|
||||||
end
|
end
|
||||||
|
|
||||||
def sprite_position(file, x_shift = SASS_NULL, y_shift = SASS_NULL)
|
def sprite_position(uri, x_shift = SASS_NULL, y_shift = SASS_NULL)
|
||||||
name = File.dirname(file.value)
|
name = File.dirname(uri.value)
|
||||||
image_name = File.basename(file.value, '.png')
|
image_name = File.basename(uri.value, '.png')
|
||||||
image = Compass::Sprites.sprites(name).detect{ |image| image[:name] == image_name }
|
image = Compass::Sprites.sprites(name).detect{ |image| image[:name] == image_name }
|
||||||
if x_shift.unit_str == "%"
|
if x_shift.unit_str == "%"
|
||||||
x = x_shift.to_s
|
x = x_shift.to_s
|
||||||
|
@ -8,7 +8,7 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
def path_and_name(uri)
|
def path_and_name(uri)
|
||||||
if uri =~ %r{((.+/)?(.+))/(\*)\.png}
|
if uri =~ %r{((.+/)?(.+))/(.+?)\.png}
|
||||||
[$1, $3, $4]
|
[$1, $3, $4]
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
@ -53,7 +53,7 @@ module Compass
|
|||||||
end.join}
|
end.join}
|
||||||
|
|
||||||
\#{$#{name}-sprite-base-class} {
|
\#{$#{name}-sprite-base-class} {
|
||||||
background: sprite-image("#{uri}") no-repeat;
|
background: generate-sprite-image("#{uri}") no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin #{name}-sprite-dimensions($sprite) {
|
@mixin #{name}-sprite-dimensions($sprite) {
|
||||||
|
@ -345,4 +345,55 @@ describe Compass::Sprites do
|
|||||||
image_md5('squares.png').should == '0187306f3858136feee87d3017e7f307'
|
image_md5('squares.png').should == '0187306f3858136feee87d3017e7f307'
|
||||||
end
|
end
|
||||||
|
|
||||||
|
it "should use the sprite-image and sprite-url function as in lemonade" do
|
||||||
|
css = render <<-SCSS
|
||||||
|
@import "squares/*.png";
|
||||||
|
|
||||||
|
.squares-1 {
|
||||||
|
background: sprite-image("squares/20x20.png") no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-2 {
|
||||||
|
background: sprite-image("squares/20x20.png", 100%) no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-3 {
|
||||||
|
background: sprite-image("squares/20x20.png", -4px, 3px) no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-4 {
|
||||||
|
background-image: sprite-url("squares/20x20.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-5 {
|
||||||
|
background-image: sprite-url("squares/*.png");
|
||||||
|
}
|
||||||
|
SCSS
|
||||||
|
css.should == <<-CSS
|
||||||
|
.squares-sprite {
|
||||||
|
background: url('/squares.png') no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-1 {
|
||||||
|
background: url('/squares.png') 0 -10px no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-2 {
|
||||||
|
background: url('/squares.png') 100% -10px no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-3 {
|
||||||
|
background: url('/squares.png') -4px -7px no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-4 {
|
||||||
|
background-image: url('/squares.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-5 {
|
||||||
|
background-image: url('/squares.png');
|
||||||
|
}
|
||||||
|
CSS
|
||||||
|
end
|
||||||
|
|
||||||
end
|
end
|
Loading…
Reference in New Issue
Block a user