Compass Sprite Base
These mixins are useful for working with sprites. This file is imported by magic sprite imports.
See the Spriting Tutorial for more information.
This file can be imported using:
@import "compass/utilities/sprites/base"
Configurable Variables help
$sprite-selectors
hover, target, active, focus
Determines those states for which you want to enable magic sprite selectors
$disable-magic-sprite-selectors
false
Determines if you want to include magic selectors in your sprites
$default-sprite-separator
"-"
Set this to underscore if you prefer
Mixins
view sourcesprite-dimensions($map, $sprite)
=sprite-dimensions($map, $sprite) height: image-height(sprite-file($map, $sprite)) width: image-width(sprite-file($map, $sprite))
@mixin sprite-dimensions($map, $sprite) { height: image-height(sprite-file($map, $sprite)); width: image-width(sprite-file($map, $sprite)); }
Set the width and height of an element to the original dimensions of an image before it was included in the sprite.
sprite-background-position($map, $sprite, $offset-x, $offset-y, $use-percentages)
=sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0, $use-percentages: false) background-position: sprite-position($map, $sprite, $offset-x, $offset-y, $use-percentages)
@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0, $use-percentages: false) { background-position: sprite-position($map, $sprite, $offset-x, $offset-y, $use-percentages); }
Set the background position of the given sprite $map
to display the
sprite of the given $sprite
name. You can move the image relative to its
natural position by passing $offset-x
and $offset-y
.
The background-position will be returned in pixels. By passing true
for
$use_percentages`, you get percentages instead.
sprite($map, $sprite, $dimensions, $offset-x, $offset-y, $use-percentages, $use-magic-selectors, $separator)
=sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0, $use-percentages: false, $use-magic-selectors: not $disable-magic-sprite-selectors, $separator: $default-sprite-separator) +sprite-background-position($map, $sprite, $offset-x, $offset-y, $use-percentages) @if $dimensions +sprite-dimensions($map, $sprite) @if $use-magic-selectors +sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y, $use-percentages, $separator)
@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0, $use-percentages: false, $use-magic-selectors: not $disable-magic-sprite-selectors, $separator: $default-sprite-separator) { @include sprite-background-position($map, $sprite, $offset-x, $offset-y, $use-percentages); @if $dimensions { @include sprite-dimensions($map, $sprite); } @if $use-magic-selectors { @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y, $use-percentages, $separator); } }
Include the position and (optionally) dimensions of this $sprite
in the given sprite $map
. The sprite url should come from either a base
class or you can specify the sprite-url
explicitly like this:
background: $map no-repeat;
sprites($map, $sprite-names, $base-class, $dimensions, $prefix, $offset-x, $offset-y, $use-percentages, $separator)
=sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0, $use-percentages: false, $separator: $default-sprite-separator) @each $sprite-name in $sprite-names @if sprite_does_not_have_parent($map, $sprite-name) $full-sprite-name: #{$prefix}#{$separator}#{$sprite-name} @if sprite_has_valid_selector($full-sprite-name) .#{$full-sprite-name} @if $base-class @extend #{$base-class} +sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y, $use-percentages, $separator: $separator)
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0, $use-percentages: false, $separator: $default-sprite-separator) { @each $sprite-name in $sprite-names { @if sprite_does_not_have_parent($map, $sprite-name) { $full-sprite-name: #{$prefix}#{$separator}#{$sprite-name}; @if sprite_has_valid_selector($full-sprite-name) { .#{$full-sprite-name} { @if $base-class { @extend #{$base-class}; } @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y, $use-percentages, $separator: $separator); } } } } }
Generates a class for each space separated name in $sprite-names
.
The class will be of the form .
If a base class is provided, then each class will extend it.
If $dimensions
is true
, the sprite dimensions will specified.
Positions are returned in pixel units. Set $use_percentages
to true to
instead get percentages.