Setting CSS sprite and :hover effect, in Sass

_cssSprite.horizontalHover.scss

//	background.jpg
//
//	+------+------+
//	|#aaa  |#aaa  |
//	|      |:hover|
//	+------+------+
//	|#bbb  |#bbb  |
//	|      |:hover|
//	+------+------+
//	|#ccc  |#ccc  |
//	|      |:hover|
//	+------+------+


$currentSpriteY : 0px;

@mixin horizontalHover($elm, $singleWidth, $singleHeight){
  #{$elm}{
    background-position: 0px $currentSpriteY;
    a:hover{
      background-position: -$singleWidth $currentSpriteY;
    }
  }
  $currentSpriteY : $currentSpriteY - $singleHeight;
}

// Usage Example
@each $elm in "#aaa", "#bbb", "#ccc"{
  @include horizontalHover($elm, 80px, 40px);
}

_cssSprite.verticalHover.scss

//  background.jpg
//
//	+------+------+------+
//	|#aaa  |#bbb  |#ccc  |
//	|      |      |      |
//	+------+------+------+
//	|#aaa  |#bbb  |#ccc  |
//	|:hover|:hover|:hover|
//	+------+------+------+


$currentSpriteX : 0px;

@mixin verticalHover($elm, $singleWidth, $singleHeight){
  #{$elm}{
    background-position: $currentSpriteY 0px;
    a:hover{
      background-position: $currentSpriteY -$singleHeight;
    }
  }
  $currentSpriteX : $currentSpriteX - $singleWidth;
}

// Usage Example
@each $elm in "#aaa", "#bbb", "#ccc"{
  @include verticalHover($elm, 40px, 80px);
}