added sprite position calculating

lib/compass/sass_extensions/functions/sprites.rb

@@ -1,4 +1,21 @@
 module Compass::SassExtensions::Functions::Sprites
+  def sprite_image(uri)
+    uri = uri.value
+    path, name = Compass::Sprites.path_and_name(uri)
+    y = 0
+    last_spacing = 0
+    images = Compass::Sprites.sprites(name)
+    images.each do |image|
+      current_spacing = number_from_var("#{name}-#{image[:name]}-spacing")
+      if y > 0
+        y += current_spacing > last_spacing ? current_spacing : last_spacing
+      end
+      image[:y] = y
+      y += image[:height]
+      last_spacing = current_spacing
+    end
+    image_url(Sass::Script::String.new("#{path}.png"))
+  end
 
   def sprite_position(file)
     name = File.dirname(file.value)
@@ -7,5 +24,14 @@ def sprite_position(file)
     y = "-#{y}px" unless y == 0
     Sass::Script::String.new("0 #{y}")
   end
-
+
+private
+
+  def number_from_var(var_name)
+    if var = environment.var(var_name)
+      var.value
+    else
+      0
+    end
+  end
 end

lib/compass/sprites.rb

@@ -9,8 +9,8 @@ def reset
         @@sprites = {}
       end
 
-      def path_and_name(file)
-        if file =~ %r{((.+/)?(.+))/(\*)\.png}
+      def path_and_name(uri)
+        if uri =~ %r{((.+/)?(.+))/(\*)\.png}
           [$1, $3, $4]
         end
       end
@@ -29,26 +29,22 @@ def find(uri, options)
       if uri =~ /\.png$/
         path, self.name = Compass::Sprites.path_and_name(uri)
         glob = File.join(Compass.configuration.images_path, uri)
-        generated_image = "#{path}.png"
-        y = 0
         Dir.glob(glob).sort.each do |file|
           width, height = Compass::SassExtensions::Functions::ImageSize::ImageProperties.new(file).size
           images << {
             :name => File.basename(file, '.png'),
             :filename => File.basename(file),
             :height => height,
-            :width => width,
-            :y => y
+            :width => width
           }
-          y += height
         end
-      
+
         contents = <<-SCSS
           $#{name}-sprite-base-class: ".#{name}-sprite" !default;
           $#{name}-sprite-dimensions: false !default;
         
           \#{$#{name}-sprite-base-class} {
-            background: image-url("#{generated_image}") no-repeat;
+            background: sprite-image("#{uri}") no-repeat;
           }
         
           @mixin #{name}-sprite-dimensions($sprite) {
@@ -83,6 +79,10 @@ def key(uri, options)
       [self.class.name + ":" + File.dirname(File.expand_path(uri)),
         File.basename(uri)]
     end
+
+    def to_s
+      ""
+    end
 
   end
 end

spec/sprites_spec.rb

@@ -20,6 +20,8 @@ def render(scss)
     # reformat to fit result of heredoc:
     "      #{css.gsub('@charset "UTF-8";', '').gsub(/\n/, "\n      ").strip}\n"
   end
+
+  # DEFAULT USAGE:
 
   it "should generate sprite classes" do
     css = render <<-SCSS
@@ -95,6 +97,8 @@ def render(scss)
     CSS
   end
 
+  # CUSTOMIZATIONS:
+
   it "should be possible to change the base class" do
     css = render <<-SCSS
       $squares-sprite-base-class: ".circles";
@@ -106,5 +110,91 @@ def render(scss)
       }
     CSS
   end
+
+  it "should calculate the spacing between images but not before first image" do
+    css = render <<-SCSS
+      $squares-10x10-spacing: 33px;
+      @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 -43px;
+      }
+    CSS
+  end
+
+  it "should calculate the spacing between images" do
+    css = render <<-SCSS
+      $squares-20x20-spacing: 33px;
+      @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 -43px;
+      }
+    CSS
+  end
+
+  it "should calculate the maximum spacing between images" do
+    css = render <<-SCSS
+      $squares-10x10-spacing: 44px;
+      $squares-20x20-spacing: 33px;
+      @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 -54px;
+      }
+    CSS
+  end
+
+  it "should calculate the maximum spacing between images in reversed order" do
+    css = render <<-SCSS
+      $squares-10x10-spacing: 33px;
+      $squares-20x20-spacing: 44px;
+      @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 -54px;
+      }
+    CSS
+  end
 
 end