Generates all the required classes, hover states and image offsets for sprite-based navigation.

SCSS Sprite based nav.scss

@function sprite-ify($items, $height, $img, $offset:0){
    display:block;
    height:$height;
    text-indent:-9999px;
    background-color:transparent;
    background-image:url($img);
    @for $index from 1 through length($items) {
        $item: nth($items, $index);
        @if $index > 1 { $offset: $offset - nth(nth($items, $index - 1), 2); }
        &.#{nth($item, 1)} {
            width:nth($item, 2);
            background-position:#{$offset} 0;
            &:hover{ background-position:#{$offset} -#{$height}; }
            &:active, &.active{ background-position:#{$offset} -#{$height*2}; }
        }
    }
}

nav{
    $sprite:        '/static/images/nav.png';
    $height:        34px;
    $nav:           ('item-1', 60px),
                    ('item-2', 57px),
                    ('item-3', 156px),
                    ('item-4', 230px),
                    ('item-5', 233px),
                    ('item-n', 453px),
                    ('etc', 513px);
    
    ul{
        li{
            float:left;
            a{ @include sprite-ify($nav, $height, $sprite); }
        }
    }
}