Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Compass sprite resize mixin
$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize
@import "my-icons/*.png";
$my-icons-sprite-dimensions: true;
@include all-my-icons-sprites;
// the fun part
.small-icons { // overriding all sprites
@include resize-sprite-set($my-icons-sprites, 40); // 40% sized
}
.some-part-of-my-site {
@include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok"
}
@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) );
}
@mixin resize-sprite-set($map, $percent, $only...) {
$name: sprite_map_name($map);
@each $sprite in sprite_names($map) {
@if length($only) == 0 or index($only, $sprite) != false {
.#{$name}-#{$sprite} {
@include resize-sprite($map, $sprite, $percent);
}
}
}
}
<h1>Regular Size</h1>
<a href="my-icons-facebook">Facebook</a>
<h1>Small</h1>
<div class="small-icons">
<a href="my-icons-facebook">Facebook</a>
</div>
@milojennings

This comment has been minimized.

Copy link

@milojennings milojennings commented Nov 17, 2013

This is awesome. Thank you!

@Galactopus

This comment has been minimized.

Copy link

@Galactopus Galactopus commented Jul 14, 2014

This is very nice thanks. It would be GREAT if it could handle hover states as well =)

@mattacular

This comment has been minimized.

Copy link

@mattacular mattacular commented Aug 19, 2014

I needed to do exactly this, and you saved me a ton of trouble. Thanks! It'd be great if this were part of Compass itself. I think a lot of people would find it useful.

@sowenjub

This comment has been minimized.

Copy link

@sowenjub sowenjub commented Sep 24, 2014

In my case I had to use

background-position: floor(nth(sprite-position($map, $sprite), 1)  * ($percent/100) ) floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );

instead of

background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );

Other than that, works like a charm, thanks!

@graphicagenda

This comment has been minimized.

Copy link

@graphicagenda graphicagenda commented Oct 28, 2014

This works! It's a time-saver too.

@nareeboy

This comment has been minimized.

Copy link

@nareeboy nareeboy commented Jan 3, 2015

How can I do this with a retina sprite sheet?

this is my code atm:

@import "compass/utilities";
@import "compass/utilities/sprites";
@import "icons/.png";
@include all-icons-sprites(true);
$icons: sprite-map("icons/
.png", $spacing: 5px); // sprite map
$sprite-high-res-suffix: '-2x' !default;

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $sprite-retina: false, $sprite-map: $icons) {
   $sprite-high-res: #{$sprite}#{$sprite-high-res-suffix};
   background-image: sprite-url($sprite-map);
   background-position: sprite-position($sprite-map, $sprite);
   background-repeat: no-repeat;
   overflow: hidden;
   height: image-height(sprite-file($sprite-map, $sprite));
   width: image-width(sprite-file($sprite-map, $sprite));

@if $sprite-retina {
  @media (-webkit-min-device-pixel-ratio: 2), 
  (-o-min-device-pixel-ratio: 3/2), 
  (min--moz-device-pixel-ratio: 2), 
  (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {

    background-size: (image-width(sprite-path($sprite-map)) / 2) (image-height(sprite-path($sprite-map)) / 2);
    background-position: round(nth(sprite-position($sprite-map, $sprite-high-res), 1) / 2) round(nth(sprite-position($sprite-map, $sprite-high-res), 2) / 2);
    height: image-height(sprite-file($sprite-map, $sprite));
    width: image-width(sprite-file($sprite-map, $sprite));
     }
   }

}

.logo{
@include use-sprite(logo, true);
}

@ThomasBullock

This comment has been minimized.

Copy link

@ThomasBullock ThomasBullock commented Jun 16, 2016

Thanks! Just what I needed!

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