I want to use a Compass generated icon-sprite for two different scenarios.
- Use the icon(s) in original size.
- Use it the same icon(s) as a smaller version using CSS3 property
background-size
.
I first do this:
$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;
Now I can use the general created CSS-classes like .logo-twitter
etc.
Two achieve the second result I could use this (darren131 / gist:3410875 - 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) );
}
.my-other-div-with-small-logos {
.logo-twitter {
$spriteName: twitter;
$percentage: 40;
@include resize-sprite($logo-sprites, $spriteName, $percentage);
}
}
But if I have around 30 logos I would need to repeat this manually for each sprite-class.
Is it possible to import the folder twice, once for the original size and a second time with the backround-size
property?
Or modify the mentioned method to create all classes automatically within another <div class="my-other-div-with-small-logos">
where the icons should appear smaller?
Or am I thinking in the wrong direction here?
That does it. It iterates over the whole map:
@each $sprite in sprite_names($logo-sprites) {
.logo-#{$sprite} {
@include resize-sprite($logo-sprites, $sprite, 40);
}
}
This helped: Way to iterate over sprites in a map
It's great to scale down sprites in modern Browsers without loading another generated sprite-image. If the logos sometimes are 50px, but should also be 20px somewhere else, this is perfectly fine.
Thank you all for this. It works! Now, i have gone ahead and expand on it as i needed something a little more dynamic where icons are constructed based on ico-[size] ico-[image] & swatch-[color]
$myicons-spacing: 20px;
@import "icons/myicons/*.png";
@include all-myicons-sprites;
@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) );
}
@each $sprite in sprite_names($myicons-sprites) {
.ico-xsmall.myicons-#{$sprite} {
@extend .myicons-#{$sprite};
@include resize-sprite($myicons-sprites, $sprite, 35);
}
.ico-small.myicons-#{$sprite} {
@extend .myicons-#{$sprite};
@include resize-sprite($myicons-sprites, $sprite, 50);
}
.ico-medium.myicons-#{$sprite} {
@extend .myicons-#{$sprite};
@include resize-sprite($myicons-sprites, $sprite, 87.5);
}
.ico-large.myicons-#{$sprite} {
@extend .myicons-#{$sprite};
@include resize-sprite($myicons-sprites, $sprite, 100);
}
}
Create placeholders for each in a loop and then include the placeholder wherever you need. For example:
@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) );
}
@each $image in twitter, facebook, pinterest {
%logo-#{$image} {
@include resize-sprite($logo-sprites, $image, 40);
}
}
.my-other-div-with-small-logos {
.logo-twitter {
@extend %logo-twitter;
}
}
Note that this assumes all images should be resized by 40%. You'll need to do more creative iterating if you need to specify different percentages for different logos.
Better yet, maybe just generate the classes in the loop?
.my-other-div-with-small-logos {
@each $image in twitter, facebook, pinterest {
.logo-#{$image} {
@include resize-sprite($logo-sprites, $image, 40);
}
}
}