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"
Imports
- Text Replacement – Replace text with images.
Configurable Variables help
$sprite-default-size
32px
$sprite-default-margin
0px
$sprite-image-default-width
$sprite-default-size
$sprite-image-default-height
$sprite-default-size
Mixins
view sourcesprite-img($img, $col, $row, $width, $height, $margin)
=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.
sprite-background($img, $width, $height)
=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.
sprite-background-rectangle($img, $width, $height)
=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.
sprite-column($col, $width, $margin)
=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.
sprite-row($row, $height, $margin)
=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.
sprite-position($col, $row, $width, $height, $margin)
=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.
sprite-replace-text($map, $sprite, $dimensions, $offset-x, $offset-y)
=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
sprite-replace-text-with-dimensions($map, $sprite, $offset-x, $offset-y)
=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