Skip to content

Instantly share code, notes, and snippets.

@NickChen14
Forked from wilkerlucio/example.scss
Last active August 29, 2015 14:18
Show Gist options
  • Save NickChen14/337720b3e8a9d0752659 to your computer and use it in GitHub Desktop.
Save NickChen14/337720b3e8a9d0752659 to your computer and use it in GitHub Desktop.
$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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment