working on sprite importer with erb templates

This commit is contained in:
Scott Davis 2011-10-25 13:49:34 -04:00
parent 71494cecfe
commit e8becc7fee
4 changed files with 55 additions and 50 deletions

View File

@ -1,7 +1,7 @@
PATH PATH
remote: . remote: .
specs: specs:
compass (0.12.0.alpha.0.5e89865) compass (0.12.0.alpha.0.71494ce)
chunky_png (~> 1.2) chunky_png (~> 1.2)
fssm (>= 0.2.7) fssm (>= 0.2.7)
sass (~> 3.1) sass (~> 3.1)

View File

@ -1,9 +1,15 @@
require 'erb'
module Compass module Compass
class SpriteImporter < Sass::Importers::Base class SpriteImporter < Sass::Importers::Base
VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/ VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png} SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
VALID_EXTENSIONS = ['.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 # finds all sprite files
def self.find_all_sprite_map_files(path) def self.find_all_sprite_map_files(path)
hex = "[0-9a-f]" hex = "[0-9a-f]"
@ -96,55 +102,7 @@ module Compass
# Generates the Sass for this sprite file # Generates the Sass for this sprite file
def self.content_for_images(uri, name, skip_overrides = false) def self.content_for_images(uri, name, skip_overrides = false)
<<-SCSS CONTENT_TEMPLATE ||= ERB.new(CONTENT_TEMPLATE_FILE)
@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 end
# Generates the override defaults for this Sprite # Generates the override defaults for this Sprite

View File

@ -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);
}