Skip to content

Instantly share code, notes, and snippets.

@darren131
Created August 21, 2012 02:30
Show Gist options
  • Save darren131/3410875 to your computer and use it in GitHub Desktop.
Save darren131/3410875 to your computer and use it in GitHub Desktop.
resize sprites in Compass
@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) );
}
@escapedcat
Copy link

Great mixin! But is it somehow possible to recreate all sprite-map classes again automatically for the second size?
I created a question here:
http://stackoverflow.com/questions/14135256/how-to-create-a-sprite-from-a-folder-with-and-without-background-size-using-com

@wilkerlucio
Copy link

hey, I did extend your implementation, also added files with usage examples: https://gist.github.com/wilkerlucio/6442309

my version has a mixin that resizes all the icons at once, which may be helpful :)

@MatrixFr
Copy link

MatrixFr commented Dec 1, 2021

how can we rewrite the function to use px instead of % : I need my icon do a specific px size, not a percent of the original

@mixin resize-sprite($map, $sprite, $px_size) like that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment