-
-
Save apauly/7917906 to your computer and use it in GitHub Desktop.
@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 ) | |
); | |
} |
This is great! But I need it to respect the max width the sprites could reach, any idea how could I achieve this?
Figured it out! If you encapsulate the sprite element into a div
with max-width
equals to the sprite image you are displaying, it will never be wider than it's original width.
This works great, but do you think there would be a way to pass a desired width to the mixin, so that instead of the image being responsive, it gets set to one size?
For example:
.icon-foo{
@include responsive-sprite($icon-sprites, foo, 200px);
}
This would be useful if you want to have more control over the exact size of the icon without wrapping it in a containing element.
Sorry, I am new in sprites images.
When I compile I get Undefined variable: "$icon-sprites"
Could you tell me how to define this variable?
I am using the same example as you.
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
Usage: