Sprite loading multiple times, not caching as I would expect - css

Question

I am trying to create a sprite mixin, based on the compass sprite mixins for SCSS.
The trouble is that the image is loading multiple times. One for each unique call of the image (so each new class name that refers to the sprite)
Here is the SCSS I am using. First we call the compass mixins:
$sprite-default-size:29px;
#import "compass/utilities/sprites/sprite-img";
Then I create my own mixin, designed to accept a column of images, with hover states to the right of each image:
$icons: "/assets/icons/socialMediaSprite.png";
#mixin verticalHoverSprite($row){
#include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
&:hover{
#include sprite-img($icons,2, $row);
}
}
The I use the apply the mixins to each required class:
.socialMediaLink{
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}
Here is the HTML I am attaching the images to:
<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>
Screen shot from Chrome network panel, which shows the image loading three times:

Answer 1

Check that caching is not disabled in your browser (it can be disabled from about v17).
Another idea is you include your image only once:
background: url(yourimage.png) no-repeat;
And then only change it's position with CSS without including the image again:
background-position: 0px 100px;
I guess you are trying to do this way I would just suggest not to include the image for every class, change only the position.

Answer 2

RynoRn was correct, but I thought his answer needed expanding to be specific to Compass SCSS, and not just CSS.
To fix it using compass and scss, I changed the code from the question to the following:
The mixin now has no reference to the image, just changes the position:
#mixin verticalHoverSprite($row){
#include sprite-position(1, $row);
&:hover{
#include sprite-position(2, $row);
}
}
and we add the background image to the socialMediaLink class:
.socialMediaLink{
#include sprite-background("/assets/icons/socialMediaSprite.png");
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}