Automate SVG Sprite Background Image Variations with a SCSS Mixin

svg-ico-sprite-mixin.scss

/*
  Automate SVG Sprite Background Image Variations with a SCSS Mixin 
    - see egghead.io video: https://egghead.io/lessons/css-automate-svg-sprite-background-image-variations-with-a-scss-mixin
    • This utilises a sass mixing to generate the necessary code for the icons within the sprite
*/

$ico-width-default: 3em;
$ico-width-small: 2em;
$icons: plug, star, umbrella;

.icon {
    width: $ico-width-default;
    height: $ico-width-default;
    display: inline-block;
    background-image: url(http://link-to-svg-image-sprite.svg)
    background-repeat: no-repeat
    background-size: cover;
}

.icon—small {
    width: $ico-width-small;
    height: $ico-width-small;    
}

@each $icon in $icons {
    $index: index($icons, $icon) - 1;    // index of current icon in the loop - 1 as sass index normally starts at 1 but we need it to start from 0

    .icon—#{$icon} {
        background-position: 0 #{-$index * $ico-width-default}

        &.icon—small {
            background-position: 0 #{-$index * $ico-width-small}
        }
    }
}