Skip to content

Instantly share code, notes, and snippets.

@rds
Created September 22, 2012 17:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rds/3766814 to your computer and use it in GitHub Desktop.
Save rds/3766814 to your computer and use it in GitHub Desktop.
Add more customisation options to Compass' sprite importer
@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);
}
$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;
}
*/
# 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')))
@Santoshah
Copy link

Any instructions where to add the content.erb and initializer.rb ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment