From e8becc7fee3f59e4dc3808834e4d645bad5a4f7a Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Tue, 25 Oct 2011 13:49:34 -0400 Subject: [PATCH 1/5] working on sprite importer with erb templates --- Gemfile.lock | 2 +- lib/compass/sprite_importer.rb | 56 +++---------------- lib/compass/sprite_importer/content.erb | 47 ++++++++++++++++ .../sprite_importer/generate_overrides.erb | 0 4 files changed, 55 insertions(+), 50 deletions(-) create mode 100644 lib/compass/sprite_importer/content.erb create mode 100644 lib/compass/sprite_importer/generate_overrides.erb diff --git a/Gemfile.lock b/Gemfile.lock index 6afb9c26..5df9882b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - compass (0.12.0.alpha.0.5e89865) + compass (0.12.0.alpha.0.71494ce) chunky_png (~> 1.2) fssm (>= 0.2.7) sass (~> 3.1) diff --git a/lib/compass/sprite_importer.rb b/lib/compass/sprite_importer.rb index 6b8f2d94..7f5ef41e 100644 --- a/lib/compass/sprite_importer.rb +++ b/lib/compass/sprite_importer.rb @@ -1,8 +1,14 @@ +require 'erb' 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') + GENERATE_OVERRIDES_TEMPLATE_FILE = File.join(TEMPLATE_FOLDER, 'generate_overrides.erb') # finds all sprite files def self.find_all_sprite_map_files(path) @@ -96,55 +102,7 @@ module Compass # Generates the Sass for this sprite file def self.content_for_images(uri, name, skip_overrides = false) - <<-SCSS -@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; - -#{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 + CONTENT_TEMPLATE ||= ERB.new(CONTENT_TEMPLATE_FILE) end # Generates the override defaults for this Sprite diff --git a/lib/compass/sprite_importer/content.erb b/lib/compass/sprite_importer/content.erb new file mode 100644 index 00000000..68bb37fe --- /dev/null +++ b/lib/compass/sprite_importer/content.erb @@ -0,0 +1,47 @@ +@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; + +#{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); +} \ No newline at end of file diff --git a/lib/compass/sprite_importer/generate_overrides.erb b/lib/compass/sprite_importer/generate_overrides.erb new file mode 100644 index 00000000..e69de29b From 16ff623732bf1198f0262736237d09f66ecbbdd1 Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Tue, 25 Oct 2011 15:55:06 -0400 Subject: [PATCH 2/5] desmelled the binding class --- lib/compass/sprite_importer.rb | 2 +- lib/compass/sprite_importer/binding.rb | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/lib/compass/sprite_importer.rb b/lib/compass/sprite_importer.rb index fbda3d50..1b3fb5dc 100644 --- a/lib/compass/sprite_importer.rb +++ b/lib/compass/sprite_importer.rb @@ -105,7 +105,7 @@ module Compass # Generates the Sass for this sprite file def self.content_for_images(uri, name, skip_overrides = false) - binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides) + binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri)) CONTENT_TEMPLATE.result(binder.get_binding) end end diff --git a/lib/compass/sprite_importer/binding.rb b/lib/compass/sprite_importer/binding.rb index 470e23b2..3e56b585 100644 --- a/lib/compass/sprite_importer/binding.rb +++ b/lib/compass/sprite_importer/binding.rb @@ -2,10 +2,6 @@ require 'ostruct' module Compass module Sprites class Binding < OpenStruct - - def sprite_names - @sprite_names ||= Compass::SpriteImporter.sprite_names(uri) - end def get_binding binding From ab20a7b9d1e17f1e7f6efe23d61078972f689058 Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Tue, 25 Oct 2011 16:14:46 -0400 Subject: [PATCH 3/5] added sass functions to allow getting the unit value demensions of a sprite image --- lib/compass/sprite_importer.rb | 2 +- lib/compass/sprite_importer/content.erb | 10 +++++++++- test/integrations/sprites_test.rb | 23 +++++++++++++++++++++++ 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/lib/compass/sprite_importer.rb b/lib/compass/sprite_importer.rb index 1b3fb5dc..8af0ea0c 100644 --- a/lib/compass/sprite_importer.rb +++ b/lib/compass/sprite_importer.rb @@ -105,7 +105,7 @@ module Compass # Generates the Sass for this sprite file def self.content_for_images(uri, name, skip_overrides = false) - binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri)) + binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri), :files => files(uri)) CONTENT_TEMPLATE.result(binder.get_binding) end end diff --git a/lib/compass/sprite_importer/content.erb b/lib/compass/sprite_importer/content.erb index 4a9d7ef2..7146f1d6 100644 --- a/lib/compass/sprite_importer/content.erb +++ b/lib/compass/sprite_importer/content.erb @@ -23,7 +23,7 @@ $<%= name %>-layout:vertical !default; <% end %> $<%= name %>-sprites: sprite-map("<%= uri %>", - <% sprite_names.map do |sprite_name| %> + <% 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, @@ -39,6 +39,14 @@ $<%= name %>-layout:vertical !default; background: $<%= name %>-sprites no-repeat; } +//sass functions to return the demensions of a sprite image as units +<% [:width, :height].each do |demension| %> + @function <%= name %>-sprite-<%= demension %>($name) { + $file: sprite_file($<%= name %>-sprites, $name); + @return image-<%= demension %>($file); + } +<% end %> + // Use this to set the dimensions of an element // based on the size of the original image. @mixin <%= name %>-sprite-dimensions($name) { diff --git a/test/integrations/sprites_test.rb b/test/integrations/sprites_test.rb index a447b3c6..659f3c6e 100644 --- a/test/integrations/sprites_test.rb +++ b/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 From 063803c5cc378661480bd5bedeec115f23e99f7e Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Tue, 25 Oct 2011 16:29:36 -0400 Subject: [PATCH 4/5] updated docs for new functions --- .../content/help/tutorials/spriting.markdown | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/doc-src/content/help/tutorials/spriting.markdown b/doc-src/content/help/tutorials/spriting.markdown index 53966616..1578ef0c 100644 --- a/doc-src/content/help/tutorials/spriting.markdown +++ b/doc-src/content/help/tutorials/spriting.markdown @@ -62,6 +62,8 @@ is located within it. ## 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: ## 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; } + +## 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 `-sprite-height` and `-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; + } + + ## 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 From fa49a6b9335ad020604492e0cd0b0965401b7c2c Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Tue, 25 Oct 2011 16:33:51 -0400 Subject: [PATCH 5/5] i cant spell =( --- lib/compass/sprite_importer/content.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/compass/sprite_importer/content.erb b/lib/compass/sprite_importer/content.erb index 7146f1d6..a6eb28e9 100644 --- a/lib/compass/sprite_importer/content.erb +++ b/lib/compass/sprite_importer/content.erb @@ -39,11 +39,11 @@ $<%= name %>-layout:vertical !default; background: $<%= name %>-sprites no-repeat; } -//sass functions to return the demensions of a sprite image as units -<% [:width, :height].each do |demension| %> - @function <%= name %>-sprite-<%= demension %>($name) { +//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-<%= demension %>($file); + @return image-<%= dimension %>($file); } <% end %>