Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
This is an example of the generated stylesheet by compass for a set of sprites
@import "compass/utilities/sprites/base";
// General Sprite Defaults
// You can override them before you import this file.
$icon-sprite-base-class: ".icon-sprite" !default;
$icon-sprite-dimensions: false !default;
$icon-position: 0% !default;
$icon-spacing: 0 !default;
$icon-repeat: no-repeat !default;
// These variables control the generated sprite output
// You can override them selectively before you import this file.
$icon-delete-position: $icon-position !default;
$icon-delete-spacing: $icon-spacing !default;
$icon-delete-repeat: $icon-repeat !default;
$icon-edit-position: $icon-position !default;
$icon-edit-spacing: $icon-spacing !default;
$icon-edit-repeat: $icon-repeat !default;
$icon-new-position: $icon-position !default;
$icon-new-spacing: $icon-spacing !default;
$icon-new-repeat: $icon-repeat !default;
$icon-save-position: $icon-position !default;
$icon-save-spacing: $icon-spacing !default;
$icon-save-repeat: $icon-repeat !default;
$icon-sprites: sprite-map("icon/*.png",
$delete-position: $icon-delete-position,
$delete-spacing: $icon-delete-spacing,
$delete-repeat: $icon-delete-repeat,
$edit-position: $icon-edit-position,
$edit-spacing: $icon-edit-spacing,
$edit-repeat: $icon-edit-repeat,
$new-position: $icon-new-position,
$new-spacing: $icon-new-spacing,
$new-repeat: $icon-new-repeat,
$save-position: $icon-save-position,
$save-spacing: $icon-save-spacing,
$save-repeat: $icon-save-repeat);
// All sprites should extend this class
// The icon-sprite mixin will do so for you.
#{$icon-sprite-base-class} {
background: $icon-sprites no-repeat;
// Use this to set the dimensions of an element
// based on the size of the original image.
@mixin icon-sprite-dimensions($name) {
@include sprite-dimensions($icon-sprites, $name)
// Move the background position to display the sprite.
@mixin icon-sprite-position($name, $offset-x: 0, $offset-y: 0) {
@include sprite-position($icon-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 icon-sprite($name, $dimensions: $icon-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
@extend #{$icon-sprite-base-class};
@include sprite($icon-sprites, $name, $dimensions, $offset-x, $offset-y)
@mixin icon-sprites($sprite-names, $dimensions: $icon-sprite-dimensions) {
@include sprites($icon-sprites, $sprite-names, $icon-sprite-base-class, $dimensions)
// Generates a class for each sprited image.
@mixin all-icon-sprites($dimensions: $icon-sprite-dimensions) {
@include icon-sprites(delete edit new save, $dimensions);

This comment has been minimized.

Copy link

rocknrollMarc commented Nov 3, 2013

that realy is magic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.