allow images to be repeated

This commit is contained in:
Nico Hagenburger 2010-10-17 23:06:54 +02:00 committed by Chris Eppstein
parent 014c609118
commit 330b39002a
3 changed files with 37 additions and 1 deletions

View File

@ -27,13 +27,24 @@ module Compass::SassExtensions::Functions::Sprites
output_png = ChunkyPNG::Image.new(width, height, ChunkyPNG::Color::TRANSPARENT)
images.each do |image|
input_png = ChunkyPNG::Image.from_file(image[:file])
position = environment.var("#{name}-#{image[:name]}-position")
if position.unit_str == "%"
image[:x] = (width - image[:width]) * (position.value / 100)
else
image[:x] = position.value
end
output_png.replace input_png, image[:x], image[:y]
repeat = environment.var("#{name}-#{image[:name]}-repeat").to_s
if repeat == "no-repeat"
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
output_png.save File.join(File.join(Compass.configuration.images_path, "#{path}.png"))

View File

@ -42,11 +42,13 @@ module Compass
$#{name}-sprite-dimensions: false !default;
$#{name}-position: 0% !default;
$#{name}-spacing: 0 !default;
$#{name}-repeat: no-repeat !default;
#{images.map do |sprite|
<<-SCSS
$#{name}-#{sprite[:name]}-position: $#{name}-position !default;
$#{name}-#{sprite[:name]}-spacing: $#{name}-spacing !default;
$#{name}-#{sprite[:name]}-repeat: $#{name}-repeat !default;
SCSS
end.join}

View File

@ -322,4 +322,27 @@ describe Compass::Sprites do
image_md5('squares.png').should == 'b61700e6d402d9df5f3820b73479f371'
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