diff --git a/lib/compass/sass_extensions/functions/sprites.rb b/lib/compass/sass_extensions/functions/sprites.rb
index 616c7bb2..ab24be7a 100644
--- a/lib/compass/sass_extensions/functions/sprites.rb
+++ b/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 @@ module Compass::SassExtensions::Functions::Sprites
     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
diff --git a/lib/compass/sprites.rb b/lib/compass/sprites.rb
index 8b8b66c5..6130c84e 100644
--- a/lib/compass/sprites.rb
+++ b/lib/compass/sprites.rb
@@ -9,8 +9,8 @@ module Compass
         @@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 @@ module Compass
       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 @@ module Compass
       [self.class.name + ":" + File.dirname(File.expand_path(uri)),
         File.basename(uri)]
     end
+    
+    def to_s
+      ""
+    end
 
   end
 end
\ No newline at end of file
diff --git a/spec/sprites_spec.rb b/spec/sprites_spec.rb
index 640e6f87..580525fe 100644
--- a/spec/sprites_spec.rb
+++ b/spec/sprites_spec.rb
@@ -20,6 +20,8 @@ describe Compass::Sprites do
     # 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 @@ describe Compass::Sprites do
     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 @@ describe Compass::Sprites do
       }
     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
\ No newline at end of file