Source on Github

Compass Sprite Image

Example 1 Simple mixins:

a.twitter
  +sprite-img("icons-32.png", 1)
a.facebook
  +sprite-img("icons-32.png", 2)

Example 2 Sharing a common base:

a
  +sprite-background("icons-32.png")
  &.twitter
    +sprite-column(1)
  &.facebook
    +sprite-row(2)

This file can be imported using: @import "compass/utilities/sprites/sprite-img"

Configurable Variables help

32px

0px

$sprite-default-size

$sprite-default-size

Mixins

view source 

=sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin)
  +sprite-background($img, $width, $height)
  +sprite-position($col, $row, $width, $height, $margin)

@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
  @include sprite-background($img, $width, $height);
  @include sprite-position($col, $row, $width, $height, $margin);
}

Sets all the rules for a sprite from a given sprite image to show just one of the sprites. To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.

view source 

=sprite-background($img, $width: $sprite-default-size, $height: $width)
  +sprite-background-rectangle($img, $width, $height)

@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
  @include sprite-background-rectangle($img, $width, $height);
}

Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.

view source 

=sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height)
  background: image-url($img) no-repeat
  width: $width
  height: $height
  overflow: hidden

@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
  background: image-url($img) no-repeat;
  width: $width;
  height: $height;
  overflow: hidden;
}

Sets rules common for all sprites, assumes a rectangular region.

view source 

=sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin)
  +sprite-position($col, 1, $width, 0px, $margin)

@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
  @include sprite-position($col, 1, $width, 0px, $margin);
}

Allows horizontal sprite positioning optimized for a single row of sprites.

view source 

=sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin)
  +sprite-position(1, $row, 0px, $height, $margin)

@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
  @include sprite-position(1, $row, 0px, $height, $margin);
}

Allows vertical sprite positioning optimized for a single column of sprites.

view source 

=sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin)
  $x: ($col - 1) * -$width - ($col - 1) * $margin
  $y: ($row - 1) * -$height - ($row - 1) * $margin
  background-position: $x $y

@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
  $x: ($col - 1) * -$width - ($col - 1) * $margin;
  $y: ($row - 1) * -$height - ($row - 1) * $margin;
  background-position: $x $y;
}

Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.

view source 

=sprite-replace-text($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0)
  +hide-text
  +sprite($map, $sprite, $dimensions, $offset-x, $offset-y)
  background-image: $map
  background-repeat: no-repeat

@mixin sprite-replace-text($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {
  @include hide-text;
  @include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
  background-image: $map;
  background-repeat: no-repeat;
}

Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions

view source 

=sprite-replace-text-with-dimensions($map, $sprite, $offset-x: 0, $offset-y: 0)
  +sprite-replace-text($map, $sprite, true, $offset-x, $offset-y)

@mixin sprite-replace-text-with-dimensions($map, $sprite, $offset-x: 0, $offset-y: 0) {
  @include sprite-replace-text($map, $sprite, true, $offset-x, $offset-y);
}

Similar to 'replace-text-with-dimensions' but with sprites To use, create your sprite and then pass it in the $map param The name of the image in the sprite folder should be $img-name