From 57f35d477a8c555341d4e08522c6d64b5fc68651 Mon Sep 17 00:00:00 2001
From: Scott Davis <jetviper21@gmail.com>
Date: Fri, 4 Nov 2011 09:42:35 -0400
Subject: [PATCH] closes #572

---
 .../utilities/sprites/_sprite-img.scss        | 35 +++++++++++++++----
 test/integrations/sprites_test.rb             | 34 ++++++++++++++++++
 2 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss b/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss
index b14536be..ff90c00a 100644
--- a/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss
+++ b/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss
@@ -28,29 +28,52 @@ $sprite-image-default-height: $sprite-default-size !default;
 // To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
 @mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
   @include sprite-background($img, $width, $height);
-  @include sprite-position($col, $row, $width, $height, $margin); }
+  @include sprite-position($col, $row, $width, $height, $margin); 
+}
 
 // Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
 @mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
-  @include sprite-background-rectangle($img, $width, $height); }
+  @include sprite-background-rectangle($img, $width, $height); 
+}
 
 // Sets rules common for all sprites, assumes a rectangular region.
 @mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
   background: image-url($img) no-repeat;
   width: $width;
   height: $height;
-  overflow: hidden; }
+  overflow: hidden; 
+}
 
 // Allows horizontal sprite positioning optimized for a single row of sprites.
 @mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
-  @include sprite-position($col, 1, $width, 0px, $margin); }
+  @include sprite-position($col, 1, $width, 0px, $margin); 
+}
 
 // Allows vertical sprite positioning optimized for a single column of sprites.
 @mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
-  @include sprite-position(1, $row, 0px, $height, $margin); }
+  @include sprite-position(1, $row, 0px, $height, $margin); 
+}
 
 // Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
 @mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
   $x: ($col - 1) * -$width - ($col - 1) * $margin;
   $y: ($row - 1) * -$height - ($row - 1) * $margin;
-  background-position: $x $y; }
+  background-position: $x $y; 
+}
+
+
+
+// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions
+@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {    
+  @include hide-text;
+  @include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
+  background-image: $map;
+  background-repeat: no-repeat;
+}
+
+// Similar to 'replace-text-with-dimensions' but with sprites
+// To use, create your sprite and then pass it in the `$map` param
+// The name of the image in the sprite folder should be `$img-name`
+@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){    
+  @include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
+}
\ No newline at end of file
diff --git a/test/integrations/sprites_test.rb b/test/integrations/sprites_test.rb
index 7effd1f2..75a21b47 100644
--- a/test/integrations/sprites_test.rb
+++ b/test/integrations/sprites_test.rb
@@ -754,5 +754,39 @@ class SpritesTest < Test::Unit::TestCase
     assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
   end
 
+  it "should replace text with images and dimensions using sprites" do
+     css = render <<-SCSS
+     @import "colors/*.png";
+     .blue { 
+       @include sprite-replace-text($colors-sprites, blue); 
+     }
+     .yellow {
+       @include sprite-replace-text-with-dimensions($colors-sprites, yellow);
+     }
+     SCSS
+     other_css = <<-CSS
+      .colors-sprite { 
+        background:url('/colors-s58671cb5bb.png') no-repeat;
+      }
+      .blue { 
+        text-indent:-119988px;
+        overflow:hidden;
+        text-align:left;
+        background-position:0 0;
+        background-image:url('/colors-s58671cb5bb.png');
+        background-repeat:no-repeat;}
+      .yellow { 
+        text-indent:-119988px;
+        overflow:hidden;
+        text-align:left;
+        background-position:0 -10px;
+        height:10px;
+        width:10px;
+        background-image:url('/colors-s58671cb5bb.png');
+        background-repeat:no-repeat;
+        }
+     CSS
+     assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
+   end
 
 end