Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

$hoverOffset: -36px;
$socialIconsSprite: (
    email: (blur: 0 0, focus: 0 $hoverOffset),
    facebook: (blur: -36px 0, focus: -36px $hoverOffset),
    twitter: (blur: -72px 0, focus: -72px $hoverOffset),
    google: (blur: -108px 0, focus: -108px $hoverOffset),
    linked: (blur: -144px 0, focus: -144px $hoverOffset)
);

$arrowSprite: (
    leftArrow: (blur: 0 0, focus: 0 -28px),
    rightArrow: (blur: -20px 0, focus: -20px -28px)
);

@mixin spriteMove($spriteMap) {
  @each $prop, $value in $spriteMap {
    $t: map-get($spriteMap, $prop);
    .#{$prop}Icon {
        background-position: map-get($t, blur);
        @content;
        
        &:hover {
            background-position: map-get($t, focus);
        }
    }
  } 
}

@include spriteMove($socialIconsSprite) {
  
};
@include spriteMove($arrowSprite);

SassMeister-output.css

.emailIcon {
  background-position: 0 0;
}
.emailIcon:hover {
  background-position: 0 -36px;
}

.facebookIcon {
  background-position: -36px 0;
}
.facebookIcon:hover {
  background-position: -36px -36px;
}

.twitterIcon {
  background-position: -72px 0;
}
.twitterIcon:hover {
  background-position: -72px -36px;
}

.googleIcon {
  background-position: -108px 0;
}
.googleIcon:hover {
  background-position: -108px -36px;
}

.linkedIcon {
  background-position: -144px 0;
}
.linkedIcon:hover {
  background-position: -144px -36px;
}

.leftArrowIcon {
  background-position: 0 0;
}
.leftArrowIcon:hover {
  background-position: 0 -28px;
}

.rightArrowIcon {
  background-position: -20px 0;
}
.rightArrowIcon:hover {
  background-position: -20px -28px;
}