Skip to content

Instantly share code, notes, and snippets.

@christiannaths
Created December 17, 2011 21:48
Show Gist options
  • Save christiannaths/1491512 to your computer and use it in GitHub Desktop.
Save christiannaths/1491512 to your computer and use it in GitHub Desktop.
@mixin sprite($url, $height: 100, $width: 100, $x: 0, $y: 0)
display: block
height: $height
width: $width
background: url($url)
background-position: ($x * $width) ($y * $height)
// used like so
// @include sprite($url: "images/sprite.png", $x: -3, $y: -1)
//
// The $x & $y values act like unit measurement offsets. In the example above
// the sprite image is offset by -300px on the x-axis and
// by -100px on the y-axis. A "unit" is defined by the $width and $height values.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment