Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Erskine's sprite mixin
@mixin sprite-bg($crop, $x:0, $y:$x, $hover:true) {
$i:0;
@each $part in $sprite {
@if ($part == $crop) {
$i:index($sprite, $part);
}
}
@if $i == 0 {
@warn "sprite-bg can't find '#{$crop}' in $sprite";
}
background-image:url("/static/images/icons/sprite.png");
background-position-x: ($x * 1px);
background-position-y: ((($i - 1) * ($spritegrid * -1px)) + $y);
background-repeat:no-repeat;
@if $hover {
&:hover,
&:focus {
background-position-x: (($spritegrid * -1px) + ($x * 1px));
}
}
.svg & { background-image:url("/static/images/icons/sprite.svg");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.