2

我正在尝试基于SCSS 的指南针精灵混合创建一个精灵混合。

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

这是我正在使用的 SCSS。首先我们调用 compass 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 网络面板的屏幕截图，显示图像加载了 3 次：

Chrome 网络面板的屏幕截图

4

2 回答 2

1

检查您的浏览器中是否未禁用缓存（大约从 v17 开始可以禁用它）。

另一个想法是您只包含一次图像：

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

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

background-position: 0px 100px;

我想您正在尝试这样做，我只是建议不要包含每个班级的图像，只更改位置。

于 2012-05-16T09:32:24.197 回答
0

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

compass为了使用and修复它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);
    }
}
于 2012-05-16T10:11:38.997 回答