Old skool png sprite sheet scss mixin

// Assumes a vertical sprite sheet
$icon-size: 18px;

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../images/sprite.png);
    width: $icon-size;
    height: $icon-size;
    background-size: $icon-size;
    vertical-align: middle;
}

$icons: alert angle-right arrow-down arrow-left arrow-right arrow-up close cog columns document filter flag grid new-tab restricted search tick trash zoom-in ;

@mixin icon-sprite($offset) {
    $offset: $offset - 1;
    background-position: left $icon-size*-$offset;
}

@for $i from 1 through length($icons) {
    $icon: nth($icons, $i);
    .icon-#{$icon} {
        @include icon-sprite($i);
    }
}