Sprite加载多次，而不是像我期望的那样缓存

Question

我正在尝试根据compass sprite mixins for SCSS创建一个sprite mixin。

问题是图像多次加载。一个用于图像的每个唯一调用（因此每个引用精灵的新类名称）

这是我正在使用的SCSS。首先我们称之为指南针mixins：

$sprite-default-size:29px;
@import "compass/utilities/sprites/sprite-img";

然后我创建了我自己的mixin，旨在接受一列图像，每个图像右侧都有悬停状态：

$icons: "/assets/icons/socialMediaSprite.png";    
@mixin verticalHoverSprite($row){
        @include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
        &:hover{
            @include sprite-img($icons,2, $row);
        }
    }

我使用将mixins应用于每个必需的类：

 .socialMediaLink{


        @include verticalHoverSprite(1);

        &.facebook{
                @include verticalHoverSprite(2);
        }
        &.twitter{
                @include verticalHoverSprite(3);
        }

    }

以下是我将图片附加到的HTML：

<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>

---

从Chrome网络面板拍摄的屏幕截图，显示图像加载三次：

Answer 1

检查浏览器中是否未禁用缓存（可以从v17左右禁用缓存）。

另一个想法是你只包括你的图像一次：

background: url(yourimage.png) no-repeat;

然后只用CSS改变它的位置而不再包括图像：

background-position: 0px 100px;

我猜你试图这样做我只是建议不要为每个班级都包括图像，只改变位置。

Answer 2

RynoRn是正确的，但我认为他的答案需要扩展到特定于Compass SCSS，而不仅仅是CSS。

要使用compass和scss进行修复，我将问题中的代码更改为以下内容：

mixin现在没有图像参考，只是改变位置：

@mixin verticalHoverSprite($row){
    @include sprite-position(1, $row);
    &:hover{
        @include sprite-position(2, $row);
    }
}

我们将背景图片添加到socialMediaLink类：

.socialMediaLink{

    @include sprite-background("/assets/icons/socialMediaSprite.png");

    @include verticalHoverSprite(1);

    &.facebook{
            @include verticalHoverSprite(2);
    }
    &.twitter{
            @include verticalHoverSprite(3);
    }
}