From e8becc7fee3f59e4dc3808834e4d645bad5a4f7a Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Tue, 25 Oct 2011 13:49:34 -0400 Subject: [PATCH] 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