Created
September 22, 2012 17:10
-
-
Save rds/3766814 to your computer and use it in GitHub Desktop.
Add more customisation options to Compass' sprite importer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass/utilities/sprites/base"; | |
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) { | |
@each $sprite-name in $sprite-names { | |
@if sprite_does_not_have_parent($map, $sprite-name) { | |
$full-sprite-name: "#{$prefix}#{$sprite-name}"; | |
.#{$full-sprite-name} { | |
@if $base-class { @extend #{$base-class}; } | |
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y); | |
} | |
} | |
} | |
} | |
// 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: "<%= name %>-" !default; | |
$<%= name %>-clean-up: true !default; | |
$<%= name %>-layout:vertical !default; | |
$<%= name %>-inline: false !default; | |
$<%= name %>-offset-x: 0 !default; | |
$<%= name %>-offset-y: 0 !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. | |
@if $<%= name %>-inline { | |
#{$<%= name %>-sprite-base-class} { | |
background-image: inline-sprite($<%= name %>-sprites); | |
} | |
} @else { | |
#{$<%= 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: $<%= name %>-prefix, $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: $<%= name %>-prefix, $offset-x: $<%= name %>-offset-x, $offset-y: $<%= name %>-offset-y) { | |
@include <%= name %>-sprites(<%= sprite_names.join(" ") %>, $dimensions, $prefix, $offset-x, $offset-y); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$icons-prefix: 'icon.'; | |
$icons-spacing: 20px; | |
$icons-offset-x: 10px; | |
$icons-offset-y: 10px; | |
@import "icons/*.png"; | |
@include all-icons-sprites; | |
/* | |
.icons-sprite, .icon.delete, .icon.edit, .icon.inbox { | |
background: url(/assets/icons-s67b7b50949.png) no-repeat; | |
} | |
.icon.delete { | |
background-position: 10px 10px; | |
} | |
.icon.edit { | |
background-position: 10px -25px; | |
} | |
.icon.inbox { | |
background-position: 10px -61px; | |
} | |
*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Redefine CONTENT_TEMPLATE to parse ERB from lib/sprite_importer/contents.erb | |
Compass::SpriteImporter.send :remove_const, :CONTENT_TEMPLATE | |
Compass::SpriteImporter.const_set :CONTENT_TEMPLATE, ERB.new(File.read(File.join(Rails.root, 'lib', 'sprite_importer', 'contents.erb'))) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Any instructions where to add the
content.erb
andinitializer.rb
?