Blog for web designers

Responsive compass sprite mixin

@mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));

@include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
     width: ceil($width*($percent/100));
     height: ceil($height*($percent/100));
     background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );

To generate sprite (map-sprite, name of icon, %)

 @include resize-sprite($spr-sprites, $icon-name, 50);

Santosh Shah

My name is Santosh Shah and blogs at

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.