Last active
May 4, 2016 06:00
-
-
Save apauly/7917906 to your computer and use it in GitHub Desktop.
Mixin for responsive sprites with Sass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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
Finally, I got it!
But I want the same request as @nicolasiensen
This would be great the image respect the original width and it doesn't span the whole of its container