// Determines those states for which you want to enable magic sprite selectors $sprite-selectors: hover, target, active, focus !default; // Set the width and height of an element to the original // dimensions of an image before it was included in the sprite. @mixin sprite-dimensions($map, $sprite) { height: image-height(sprite-file($map, $sprite)); width: image-width(sprite-file($map, $sprite)); } // 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. @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); } // Determines if you want to include magic selectors in your sprites $disable-magic-sprite-selectors: false !default; // Set this to underscore if you prefer $default-sprite-separator: "-" !default; // 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; @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 selectors for the `$sprite` given the `$map` and the // `$full-sprite-name` // @private @mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0, $use-percentages: false, $separator: $default-sprite-separator) { @each $state in $sprite-selectors { $sprite-class: "#{$full-sprite-name}#{$separator}#{$state}"; @if sprite_has_selector($map, $sprite-name, $state) { @if sprite_has_valid_selector($sprite-class) { &:#{$state}, &.#{$sprite-class} { @include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state), $offset-x, $offset-y, $use-percentages); } } } } } // 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. @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); } } } } }