|
| 1 | +// Determines those states for which you want to enable magic sprite selectors |
| 2 | +$sprite-selectors: hover, target, active, focus !default; |
| 3 | + |
| 4 | +// Set the width and height of an element to the original |
| 5 | +// dimensions of an image before it was included in the sprite. |
| 6 | +@mixin sprite-dimensions($map, $sprite) { |
| 7 | + height: image-height(sprite-file($map, $sprite)); |
| 8 | + width: image-width(sprite-file($map, $sprite)); |
| 9 | +} |
| 10 | + |
| 11 | +// Set the background position of the given sprite `$map` to display the |
| 12 | +// sprite of the given `$sprite` name. You can move the image relative to its |
| 13 | +// natural position by passing `$offset-x` and `$offset-y`. |
| 14 | +// The background-position will be returned in pixels. By passing `true |
| 15 | +// for `$use_percentages`, you get percentages instead. |
| 16 | +@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0, |
| 17 | +$use-percentages: false) { |
| 18 | + background-position: sprite-position($map, $sprite, $offset-x, $offset-y, |
| 19 | + $use-percentages); |
| 20 | +} |
| 21 | + |
| 22 | + |
| 23 | +// Determines if you want to include magic selectors in your sprites |
| 24 | +$disable-magic-sprite-selectors: false !default; |
| 25 | + |
| 26 | +// Set this to underscore if you prefer |
| 27 | +$default-sprite-separator: "-" !default; |
| 28 | + |
| 29 | +// Include the position and (optionally) dimensions of this `$sprite` |
| 30 | +// in the given sprite `$map`. The sprite url should come from either a base |
| 31 | +// class or you can specify the `sprite-url` explicitly like this: |
| 32 | +// |
| 33 | +// background: $map no-repeat; |
| 34 | +@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0, |
| 35 | + $use-percentages: false, |
| 36 | + $use-magic-selectors: not $disable-magic-sprite-selectors, |
| 37 | + $separator: $default-sprite-separator) { |
| 38 | + @include sprite-background-position($map, $sprite, $offset-x, $offset-y, |
| 39 | + $use-percentages); |
| 40 | + @if $dimensions { |
| 41 | + @include sprite-dimensions($map, $sprite); |
| 42 | + } |
| 43 | + @if $use-magic-selectors { |
| 44 | + @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y, |
| 45 | + $use-percentages, $separator); |
| 46 | + } |
| 47 | +} |
| 48 | + |
| 49 | +// Include the selectors for the `$sprite` given the `$map` and the |
| 50 | +// `$full-sprite-name` |
| 51 | +// @private |
| 52 | +@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, |
| 53 | + $offset-y: 0, $use-percentages: false, |
| 54 | + $separator: $default-sprite-separator) { |
| 55 | + @each $state in $sprite-selectors { |
| 56 | + $sprite-class: "#{$full-sprite-name}#{$separator}#{$state}"; |
| 57 | + @if sprite_has_selector($map, $sprite-name, $state) { |
| 58 | + @if sprite_has_valid_selector($sprite-class) { |
| 59 | + &:#{$state}, &.#{$sprite-class} { |
| 60 | + @include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state), |
| 61 | + $offset-x, $offset-y, $use-percentages); |
| 62 | + } |
| 63 | + } |
| 64 | + } |
| 65 | + } |
| 66 | +} |
| 67 | + |
| 68 | +// Generates a class for each space separated name in `$sprite-names`. |
| 69 | +// The class will be of the form .<map-name>-<sprite-name>. |
| 70 | +// |
| 71 | +// If a base class is provided, then each class will extend it. |
| 72 | +// |
| 73 | +// If `$dimensions` is `true`, the sprite dimensions will specified. |
| 74 | +// Positions are returned in pixel units. Set `$use_percentages` to true to |
| 75 | +// instead get percentages. |
| 76 | +@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, |
| 77 | + $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0, |
| 78 | + $use-percentages: false, |
| 79 | + $separator: $default-sprite-separator) { |
| 80 | + @each $sprite-name in $sprite-names { |
| 81 | + @if sprite_does_not_have_parent($map, $sprite-name) { |
| 82 | + $full-sprite-name: "#{$prefix}#{$separator}#{$sprite-name}"; |
| 83 | + @if sprite_has_valid_selector($full-sprite-name) { |
| 84 | + .#{$full-sprite-name} { |
| 85 | + @if $base-class { @extend #{$base-class}; } |
| 86 | + @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y, |
| 87 | + $use-percentages, $separator: $separator); |
| 88 | + } |
| 89 | + } |
| 90 | + } |
| 91 | + } |
| 92 | +} |
0 commit comments