SASS sprite mixin

//**
  Example use:
  a
    +sprite-bg("icons-32.png")
  a.twitter
    +sprite-column(1)
  a.facebook
    +sprite-column(2)
  ...

!sprite_default_size  ||= 32px
!sprite_default_margin ||= 0px
!sprite_image_default_width ||= !sprite_default_size
!sprite_image_default_height ||= !sprite_default_size


// 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.
=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_image_default_margin)
  +sprite-bg(!img, !width, !height)
  +sprite-select(!col, !row, !width, !height, !margin)

// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
=sprite-bg(!img, !width = !sprite_default_size, !height = !width)
  +sprite-bg-rect(!img, !width, !height)

// Sets rules common for all sprites, assumes a rectangular region.
=sprite-bg-rect(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height)
  :background= image_url(!img) "no-repeat"
  :width= !width
  :height= !height
  :overflow hidden

// Allows horizontal sprite positioning optimized for a single row of sprites.
=sprite-select-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin)
  +sprite-select(!col, 1, !width, 0px, !margin)

// Allows vertical sprite positioning optimized for a single column of sprites.
=sprite-select-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
  +sprite-select(1, !row, 0px, !height, !margin)

// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
=sprite-select(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_image_default_margin)
  !x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
  !y = ((!row - 1) * -!height) - ((!row - 1) * !margin)
  :background-position= !x !y