Speeding up a sprite mixin

33 views
Skip to first unread message

Robert Statham

unread,
Jan 6, 2016, 7:41:56 PM1/6/16
to Sass
I added a sprite mixin to make it easier for me to change sprites for new clients. It is slowing down my compile time, even when there are no changes to the images it the folders.

Is there a way to improve my mixin or extensions suggestions i can bring my compile time down.

Mixin in question:


@mixin use-sprite($sprite, $icons, $spriteUrl, $icons-2x: '', $spriteUrl-2x: '') {
background-image: $spriteUrl;
background-position: sprite-position($icons, $sprite);
@include inline-block();
position:relative;
height: image-height(sprite-file($icons, $sprite));
width: image-width(sprite-file($icons, $sprite));

// Retina spritesheet
@if ($icons-2x != '' && $spriteUrl-2x != '') {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
background-image: $spriteUrl-2x;
background-size: (image-width(sprite-path($icons-2x)) / 2) (image-height(sprite-path($icons-2x)) / 2);
background-position: round(nth(sprite-position($icons-2x, $sprite), 1) / 2) round(nth(sprite-position($icons-2x, $sprite), 2) / 2);
height: image-height(sprite-file($icons-2x, $sprite)) / 2;
width: image-width(sprite-file($icons-2x, $sprite)) / 2;
}
}
}


and example use:

.badge-icon {
    &.ally {
        @include use-sprite("ally", $badge-icons, $badge-spriteUrl, $badge-icons-2x, $badge-spriteUrl-2x);
        &.locked {
            @include use-sprite("ally", $badge-locked-icons, $badge-locked-spriteUrl, $badge-locked-icons-2x, $badge-locked-spriteUrl-2x);
        }
        &.lg {
            @include use-sprite("ally", $badge-lg-icons, $badge-lg-spriteUrl, $badge-lg-icons-2x, $badge-lg-spriteUrl-2x);                    
        }
    }
}

There must be a more efficient way than the what I am doing as I have 16 sprites images to be built.

John Riviello

unread,
Jan 7, 2016, 1:41:53 AM1/7/16
to Sass
Are you generating your sprites with Compass, eyeglass-spriting, or something else?
Reply all
Reply to author
Forward
0 new messages