https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.7 KiB
66 lines
2.7 KiB
// Determines those states for which you want to enable magic sprite selectors |
|
$sprite-selectors: hover, target, active !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`. |
|
@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0) { |
|
background-position: sprite-position($map, $sprite, $offset-x, $offset-y); |
|
} |
|
|
|
|
|
// Determines if you want to include magic selectors in your sprites |
|
$disable-magic-sprite-selectors:false !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) { |
|
@include sprite-background-position($map, $sprite, $offset-x, $offset-y); |
|
@if $dimensions { |
|
@include sprite-dimensions($map, $sprite); |
|
} |
|
@if not $disable-magic-sprite-selectors { |
|
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y); |
|
} |
|
} |
|
|
|
// 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) { |
|
@each $selector in $sprite-selectors { |
|
@if sprite_has_selector($map, $sprite-name, $selector) { |
|
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} { |
|
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Generates a class for each space separated name in `$sprite-names`. |
|
// The class will be of the form .<map-name>-<sprite-name>. |
|
// |
|
// If a base class is provided, then each class will extend it. |
|
// |
|
// If `$dimensions` is `true`, the sprite dimensions will specified. |
|
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) { |
|
@each $sprite-name in $sprite-names { |
|
@if sprite_does_not_have_parent($map, $sprite-name) { |
|
$full-sprite-name: "#{$prefix}-#{$sprite-name}"; |
|
.#{$full-sprite-name} { |
|
@if $base-class { @extend #{$base-class}; } |
|
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y); |
|
} |
|
} |
|
} |
|
} |