Merge pull request #607 from chriseppstein/sprite_demensions

Sprite demensions

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    compass (0.12.alpha.0.8ede06f)
+    compass (0.12.alpha.0.a00044c)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.1)
@@ -50,14 +50,14 @@ GEM
       term-ansicolor (>= 1.0.6)
     diff-lcs (1.1.3)
     em-dir-watcher (0.9.4)
-    em-websocket (0.3.1)
+    em-websocket (0.3.5)
       addressable (>= 2.1.1)
       eventmachine (>= 0.12.9)
     erubis (2.6.6)
       abstract (>= 1.0.0)
     eventmachine (0.12.10)
     fssm (0.2.7)
-    gherkin (2.5.1)
+    gherkin (2.5.4)
       json (>= 1.4.6)
     haml (3.1.3)
     i18n (0.5.0)
@@ -72,7 +72,7 @@ GEM
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
     metaclass (0.0.1)
-    mime-types (1.16)
+    mime-types (1.17.1)
     mocha (0.10.0)
       metaclass (~> 0.0.1)
     polyglot (0.3.2)
@@ -95,9 +95,10 @@ GEM
       rake (>= 0.8.7)
       rdoc (~> 3.4)
       thor (~> 0.14.4)
-    rake (0.9.2)
+    rake (0.9.2.2)
-    rcov (0.9.10)
+    rcov (0.9.11)
-    rdoc (3.9.4)
+    rdoc (3.11)
+      json (~> 1.4)
     rspec (2.0.1)
       rspec-core (~> 2.0.1)
       rspec-expectations (~> 2.0.1)
@@ -111,14 +112,14 @@ GEM
     ruby-json (1.1.2)
     ruby-prof (0.10.8)
     rubyzip (0.9.4)
-    sass (3.1.7)
+    sass (3.1.10)
-    term-ansicolor (1.0.6)
+    term-ansicolor (1.0.7)
     thor (0.14.6)
     timecop (0.3.5)
     treetop (1.4.10)
       polyglot
       polyglot (>= 0.3.1)
-    tzinfo (0.3.29)
+    tzinfo (0.3.30)
 
 PLATFORMS
   ruby

doc-src/content/help/tutorials/spriting.markdown

@@ -62,6 +62,8 @@ is located within it.
 <a name='nested-folders'></a>    
 ## Nested Folders    
 
+****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
+
 Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
 
 Example:
@@ -72,6 +74,8 @@ Example:
 <a name="selector-control"></a>
 ## Selector Control
 
+****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+
 If you want control over what selectors are generated, it is easy to do. In this example,
 this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent
 on the name of the folder in which you've placed your icons.
@@ -98,9 +102,35 @@ And your stylesheet will compile to:
     .actions .save   { background-position: 0 -96px; }
     .actions .delete { background-position: 0 0;     }
 
+<a name="sass_functions"></a>
+## Sass Functions
+
+****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+
+Getting the image dimensions of a sprite
+
+You can get a unit value by using the magical dimension functions `<map>-sprite-height` and `<map>-sprite-width`
+If you are looking to just return the dimensions see the [docs](/reference/compass/utilities/sprites/base/#mixin-sprite-dimensions)
+
+Example:
+
+
+    @import "icon/*.png";
+    $box-padding: 5px;
+    $height: icon-sprite-height(some_icon);
+    $width: icon-sprite-width(some_icon);
+    
+    .somediv {
+      height:$height + $box-padding;
+      width:$width + $box-padding;
+    }
+  
+  
 <a name="magic-imports"></a>
 ## Magic Imports
 
+****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+
 As noted above, compass will magically create sprite stylesheets for you. Some people like
 magic, some people are scared by it, and others are curious about how the magic works. If
 you would like to avoid the magic, you can use compass to generate an import for you. On the

lib/compass/sprite_importer.rb

@@ -1,9 +1,17 @@
+require 'erb'
+require 'compass/sprite_importer/binding'
 module Compass
   class SpriteImporter < Sass::Importers::Base
     VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
     SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
     VALID_EXTENSIONS = ['.png']
     
+    TEMPLATE_FOLDER = File.join(File.expand_path('../', __FILE__), 'sprite_importer')
+    CONTENT_TEMPLATE_FILE = File.join(TEMPLATE_FOLDER, 'content.erb')
+    CONTENT_TEMPLATE = ERB.new(File.read(CONTENT_TEMPLATE_FILE))
+
+
+
     # finds all sprite files
     def self.find_all_sprite_map_files(path)
       hex = "[0-9a-f]"
@@ -97,82 +105,8 @@ module Compass
 
     # Generates the Sass for this sprite file
     def self.content_for_images(uri, name, skip_overrides = false)
-      <<-SCSS
+      binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri), :files => files(uri))
-@import "compass/utilities/sprites/base";
+      CONTENT_TEMPLATE.result(binder.get_binding)
-
-// General Sprite Defaults
-// You can override them before you import this file.
-$#{name}-sprite-base-class: ".#{name}-sprite" !default;
-$#{name}-sprite-dimensions: false !default;
-$#{name}-position: 0% !default;
-$#{name}-spacing: 0 !default;
-$#{name}-repeat: no-repeat !default;
-$#{name}-prefix: '' !default;
-$#{name}-clean-up: true !default;
-$#{name}-layout: vertical !default;
-
-#{skip_overrides ? "$#{name}-sprites: sprite-map(\"#{uri}\", $layout: $#{name}-layout, $cleanup: $#{name}-clean-up);" : generate_overrides(uri, name) }
-
-// All sprites should extend this class
-// The #{name}-sprite mixin will do so for you.
-\#{$#{name}-sprite-base-class} {
-  background: $#{name}-sprites no-repeat;
-}
-
-// Use this to set the dimensions of an element
-// based on the size of the original image.
-@mixin #{name}-sprite-dimensions($name) {
-  @include sprite-dimensions($#{name}-sprites, $name)
-}
-
-// Move the background position to display the sprite.
-@mixin #{name}-sprite-position($name, $offset-x: 0, $offset-y: 0) {
-  @include sprite-background-position($#{name}-sprites, $name, $offset-x, $offset-y)
-}
-
-// Extends the sprite base class and set the background position for the desired sprite.
-// It will also apply the image dimensions if $dimensions is true.
-@mixin #{name}-sprite($name, $dimensions: $#{name}-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
-  @extend \#{$#{name}-sprite-base-class};
-  @include sprite($#{name}-sprites, $name, $dimensions, $offset-x, $offset-y)
-}
-
-@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) {
-  @include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix, $offset-x, $offset-y)
-}
-
-// Generates a class for each sprited image.
-@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) {
-  @include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y);
-}
-SCSS
-    end
-    
-    # Generates the override defaults for this Sprite
-    # <tt>$#{name}-#{sprite_name}-position </tt>
-    # <tt> $#{name}-#{sprite_name}-spacing </tt>
-    # <tt> #{name}-#{sprite_name}-repeat: </tt>
-    def self.generate_overrides(uri, name)
-      sprites = sprite_names(uri)
-      content = <<-TXT
-// These variables control the generated sprite output
-// You can override them selectively before you import this file.
-      TXT
-      sprites.map do |sprite_name| 
-        content += <<-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
-
-      content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n  $layout: $#{name}-layout, \n  $cleanup: $#{name}-clean-up,\n"
-      content += sprites.map do |sprite_name| 
-%Q{  $#{name}-#{sprite_name}-position: $#{name}-#{sprite_name}-position,
-  $#{name}-#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
-  $#{name}-#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
-      end.join(",\n")
-      content += ");"
     end
   end
 end

lib/compass/sprite_importer/binding.rb

@@ -0,0 +1,11 @@
+require 'ostruct'
+module Compass
+  module Sprites
+    class Binding < OpenStruct
+      
+      def get_binding
+        binding
+      end
+    end
+  end
+end

lib/compass/sprite_importer/content.erb

@@ -0,0 +1,75 @@
+@import "compass/utilities/sprites/base";
+
+// General Sprite Defaults
+// You can override them before you import this file.
+$<%= name %>-sprite-base-class: ".<%= name %>-sprite" !default;
+$<%= name %>-sprite-dimensions: false !default;
+$<%= name %>-position: 0% !default;
+$<%= name %>-spacing: 0 !default;
+$<%= name %>-repeat: no-repeat !default;
+$<%= name %>-prefix: '' !default;
+$<%= name %>-clean-up: true !default;
+$<%= name %>-layout:vertical !default;
+
+<% if skip_overrides %> 
+  $<%= name %>-sprites: sprite-map("<%= uri %>", $layout: $<%= name %>-layout, $cleanup: $<%= name %>-clean-up);
+<% else %>  
+ // These variables control the generated sprite output
+ // You can override them selectively before you import this file.
+ <% sprite_names.each do |sprite_name| %>
+   $<%= name %>-<%= sprite_name %>-position: $<%= name %>-position !default;
+   $<%= name %>-<%= sprite_name %>-spacing:  $<%= name %>-spacing !default;
+   $<%= name %>-<%= sprite_name %>-repeat:   $<%= name %>-repeat !default;
+ <% end %>
+
+ $<%= name %>-sprites: sprite-map("<%= uri %>",
+ <% sprite_names.each do |sprite_name| %>
+   $<%= name %>-<%= sprite_name %>-position: $<%= name %>-<%= sprite_name %>-position, 
+   $<%= name %>-<%= sprite_name %>-spacing:  $<%= name %>-<%= sprite_name %>-spacing, 
+   $<%= name %>-<%= sprite_name %>-repeat:   $<%= name %>-<%= sprite_name %>-repeat,
+ <% end %>
+ $layout: $<%= name %>-layout,
+ $cleanup: $<%= name %>-clean-up
+ );
+<% end %>
+
+// All sprites should extend this class
+// The <%= name %>-sprite mixin will do so for you.
+#{$<%= name %>-sprite-base-class} {
+  background: $<%= name %>-sprites no-repeat;
+}
+
+//sass functions to return the dimensions of a sprite image as units
+<% [:width, :height].each do |dimension| %>
+  @function <%= name %>-sprite-<%= dimension %>($name) {
+    $file: sprite_file($<%= name %>-sprites, $name);
+    @return image-<%= dimension %>($file);
+  }
+<% end %>
+
+// Use this to set the dimensions of an element
+// based on the size of the original image.
+@mixin <%= name %>-sprite-dimensions($name) {
+  @include sprite-dimensions($<%= name %>-sprites, $name)
+}
+
+// Move the background position to display the sprite.
+@mixin <%= name %>-sprite-position($name, $offset-x: 0, $offset-y: 0) {
+  @include sprite-background-position($<%= name %>-sprites, $name, $offset-x, $offset-y)
+}
+
+// Extends the sprite base class and set the background position for the desired sprite.
+// It will also apply the image dimensions if $dimensions is true.
+@mixin <%= name %>-sprite($name, $dimensions: $<%= name %>-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
+  @extend #{$<%= name %>-sprite-base-class};
+  @include sprite($<%= name %>-sprites, $name, $dimensions, $offset-x, $offset-y)
+}
+
+@mixin <%= name %>-sprites($sprite-names, $dimensions: $<%= name %>-sprite-dimensions, $prefix: sprite-map-name($<%= name %>-sprites), $offset-x: 0, $offset-y: 0) {
+  @include sprites($<%= name %>-sprites, $sprite-names, $<%= name %>-sprite-base-class, $dimensions, $prefix, $offset-x, $offset-y)
+}
+
+// Generates a class for each sprited image.
+@mixin all-<%= name %>-sprites($dimensions: $<%= name %>-sprite-dimensions, $prefix: sprite-map-name($<%= name %>-sprites), $offset-x: 0, $offset-y: 0) {
+  @include <%= name %>-sprites(<%= sprite_names.join(" ") %>, $dimensions, $prefix, $offset-x, $offset-y);
+}

test/integrations/sprites_test.rb

@@ -718,4 +718,27 @@ class SpritesTest < Test::Unit::TestCase
     assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
   end
 
+  it "should allow use of demension functions" do
+    css = render <<-SCSS
+      @import "squares/*.png";
+      $h: squares-sprite-height(twenty-by-twenty);
+      $w: squares-sprite-width(twenty-by-twenty);
+      .div {
+        height:$h + 1px;
+        width:$w + 2px;
+      }
+    SCSS
+    other_css = <<-CSS
+      .squares-sprite {
+        background: url('/squares-sbbc18e2129.png') no-repeat;
+      }
+      .div {
+        height:21px;
+        width:22px;
+      }
+    CSS
+    assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
+  end
+
+
 end