Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save superfine/3686e7b37a197d0f7b4b4e52fd299f53 to your computer and use it in GitHub Desktop.
Save superfine/3686e7b37a197d0f7b4b4e52fd299f53 to your computer and use it in GitHub Desktop.
Mixin for responsive sprites with Sass
@mixin responsive-sprite($map, $icon){
$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);
$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);
$space-top: floor(nth(sprite-position($map, $icon), 2));
@if $space-top == 0 {
$space-top: 0px
}
width:percentage($sprite-width / $icon-width);
display: block;
height: 0;
padding-bottom: percentage($icon-height / $icon-width);
background-size: 100%;
background-position:0 percentage(
-1 * $space-top / ( $sprite-height - $icon-height )
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment