diff --git a/Gemfile.lock b/Gemfile.lock index 88cf3789..d0e4b152 100644 --- a/Gemfile.lock +++ b/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) - rcov (0.9.10) - rdoc (3.9.4) + rake (0.9.2.2) + rcov (0.9.11) + 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) - term-ansicolor (1.0.6) + sass (3.1.10) + 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 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 diff --git a/lib/compass/sprite_importer.rb b/lib/compass/sprite_importer.rb index 442cbbc0..8af0ea0c 100644 --- a/lib/compass/sprite_importer.rb +++ b/lib/compass/sprite_importer.rb @@ -1,8 +1,16 @@ +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) @@ -97,82 +105,8 @@ 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 - end - - # Generates the override defaults for this Sprite - # $#{name}-#{sprite_name}-position - # $#{name}-#{sprite_name}-spacing - # #{name}-#{sprite_name}-repeat: - 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 += ");" + 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 end diff --git a/lib/compass/sprite_importer/binding.rb b/lib/compass/sprite_importer/binding.rb new file mode 100644 index 00000000..3e56b585 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/compass/sprite_importer/content.erb b/lib/compass/sprite_importer/content.erb new file mode 100644 index 00000000..a6eb28e9 --- /dev/null +++ b/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); +} \ No newline at end of file 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