雪碧加載多次，而不是我所期望的緩存

Question

我想創建一個精靈混合，基於compass sprite mixins for SCSS。

問題是圖像加載多次。一個用於圖像的每次唯一調用（因此每個新的類名稱引用精靈）

這是我正在使用的SCSS。首先，我們稱之爲羅盤混入：

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

然後創建我自己的混入，旨在接受一列圖片，與懸停狀態，以每幅圖像的右側：

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

的我用的是應用混入到每個需要等級：

.socialMediaLink{ 


     @include verticalHoverSprite(1); 

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

    } 

這裏是我的圖像連接到HTML：

在Chrome網絡面板

---

屏幕截圖，其中顯示了圖像加載三次：

Answer 1

檢查緩存未在您的瀏覽器禁用（可以從約V17禁用）。

另一個想法是，你有你的形象只有一次：

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

，然後只改變它與CSS的位置，而不包括再形象：

background-position: 0px 100px; 

我猜你正在努力做到這一點我只是建議不要爲每個班級包含圖片，只改變位置。

Answer 2

RynoRn是正確的，但我認爲他的答案需要擴展到特定於Compass SCSS，而不僅僅是CSS。

要使用compass和scss解決它，我改變了代碼的問題如下：

的混入現在已經沒有參考圖像，只是改變位置：

@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); 
    } 
}