allow images to be repeated
This commit is contained in:
parent
2522a3c981
commit
79d6e28cf5
@ -27,13 +27,24 @@ module Compass::SassExtensions::Functions::Sprites
|
|||||||
output_png = ChunkyPNG::Image.new(width, height, ChunkyPNG::Color::TRANSPARENT)
|
output_png = ChunkyPNG::Image.new(width, height, ChunkyPNG::Color::TRANSPARENT)
|
||||||
images.each do |image|
|
images.each do |image|
|
||||||
input_png = ChunkyPNG::Image.from_file(image[:file])
|
input_png = ChunkyPNG::Image.from_file(image[:file])
|
||||||
|
|
||||||
position = environment.var("#{name}-#{image[:name]}-position")
|
position = environment.var("#{name}-#{image[:name]}-position")
|
||||||
if position.unit_str == "%"
|
if position.unit_str == "%"
|
||||||
image[:x] = (width - image[:width]) * (position.value / 100)
|
image[:x] = (width - image[:width]) * (position.value / 100)
|
||||||
else
|
else
|
||||||
image[:x] = position.value
|
image[:x] = position.value
|
||||||
end
|
end
|
||||||
|
|
||||||
|
repeat = environment.var("#{name}-#{image[:name]}-repeat").to_s
|
||||||
|
if repeat == "no-repeat"
|
||||||
output_png.replace input_png, image[:x], image[:y]
|
output_png.replace input_png, image[:x], image[:y]
|
||||||
|
else
|
||||||
|
x = image[:x] - (image[:x] / image[:width]).ceil * image[:width]
|
||||||
|
while x < width do
|
||||||
|
output_png.replace input_png, x, image[:y]
|
||||||
|
x += image[:width]
|
||||||
|
end
|
||||||
|
end
|
||||||
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"))
|
||||||
|
|
||||||
|
@ -42,11 +42,13 @@ module Compass
|
|||||||
$#{name}-sprite-dimensions: false !default;
|
$#{name}-sprite-dimensions: false !default;
|
||||||
$#{name}-position: 0% !default;
|
$#{name}-position: 0% !default;
|
||||||
$#{name}-spacing: 0 !default;
|
$#{name}-spacing: 0 !default;
|
||||||
|
$#{name}-repeat: no-repeat !default;
|
||||||
|
|
||||||
#{images.map do |sprite|
|
#{images.map do |sprite|
|
||||||
<<-SCSS
|
<<-SCSS
|
||||||
$#{name}-#{sprite[:name]}-position: $#{name}-position !default;
|
$#{name}-#{sprite[:name]}-position: $#{name}-position !default;
|
||||||
$#{name}-#{sprite[:name]}-spacing: $#{name}-spacing !default;
|
$#{name}-#{sprite[:name]}-spacing: $#{name}-spacing !default;
|
||||||
|
$#{name}-#{sprite[:name]}-repeat: $#{name}-repeat !default;
|
||||||
SCSS
|
SCSS
|
||||||
end.join}
|
end.join}
|
||||||
|
|
||||||
|
@ -322,4 +322,27 @@ describe Compass::Sprites do
|
|||||||
image_md5('squares.png').should == 'b61700e6d402d9df5f3820b73479f371'
|
image_md5('squares.png').should == 'b61700e6d402d9df5f3820b73479f371'
|
||||||
end
|
end
|
||||||
|
|
||||||
|
it "should repeat the image" do
|
||||||
|
css = render <<-SCSS
|
||||||
|
$squares-repeat: repeat;
|
||||||
|
@import "squares/*.png";
|
||||||
|
@include all-squares-sprites;
|
||||||
|
SCSS
|
||||||
|
css.should == <<-CSS
|
||||||
|
.squares-sprite, .squares-10x10, .squares-20x20 {
|
||||||
|
background: url('/squares.png') no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-10x10 {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squares-20x20 {
|
||||||
|
background-position: 0 -10px;
|
||||||
|
}
|
||||||
|
CSS
|
||||||
|
image_size('squares.png').should == [20, 30]
|
||||||
|
image_md5('squares.png').should == '0187306f3858136feee87d3017e7f307'
|
||||||
|
end
|
||||||
|
|
||||||
end
|
end
|
Loading…
Reference in New Issue
Block a user