working on sprite importer with erb templates
This commit is contained in:
parent
71494cecfe
commit
e8becc7fee
@ -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)
|
||||||
|
@ -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
|
||||||
|
47
lib/compass/sprite_importer/content.erb
Normal file
47
lib/compass/sprite_importer/content.erb
Normal 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);
|
||||||
|
}
|
0
lib/compass/sprite_importer/generate_overrides.erb
Normal file
0
lib/compass/sprite_importer/generate_overrides.erb
Normal file
Loading…
Reference in New Issue
Block a user