sprite importer will now use erb to generate scss to its easyer to manage
This commit is contained in:
Scott Davis
commit
98775ea1ec
21
Gemfile.lock
21
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
|
||||
|
||||
@ -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
|
||||
@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
|
||||
# <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 += ");"
|
||||
binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides)
|
||||
CONTENT_TEMPLATE.result(binder.get_binding)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
15
lib/compass/sprite_importer/binding.rb
Normal file
15
lib/compass/sprite_importer/binding.rb
Normal file
@ -0,0 +1,15 @@
|
||||
require 'ostruct'
|
||||
module Compass
|
||||
module Sprites
|
||||
class Binding < OpenStruct
|
||||
|
||||
def sprite_names
|
||||
@sprite_names ||= Compass::SpriteImporter.sprite_names(uri)
|
||||
end
|
||||
|
||||
def get_binding
|
||||
binding
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
67
lib/compass/sprite_importer/content.erb
Normal file
67
lib/compass/sprite_importer/content.erb
Normal file
@ -0,0 +1,67 @@
|
||||
@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.map 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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user