2

SCSSのコンパススプライトミックスインに基づいて、スプライトミックスインを作成しようとしています。

問題は、画像が複数回読み込まれていることです。画像の一意の呼び出しごとに1つ（つまり、スプライトを参照する新しいクラス名ごとに）

これが私が使用している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は次のとおりです。

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

Chromeネットワークパネルのスクリーンショット。画像の読み込みが3回表示されています。

Chromeネットワークパネルのスクリーンショット

4

2 に答える 2

1

ブラウザでキャッシュが無効になっていないことを確認してください（v17以降で無効にできます）。

もう1つのアイデアは、画像を1回だけ含めることです。

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

そして、画像を再度含めずに、CSSで位置を変更するだけです。

background-position: 0px 100px;

あなたはこのようにしようとしていると思います。すべてのクラスの画像を含めず、位置のみを変更することをお勧めします。

于 2012-05-16T09:32:24.197 に答える
0

RynoRnは正しかったのですが、彼の答えは、CSSだけでなく、CompassSCSSに固有のものに拡張する必要があると思いました。

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);
    }
}
于 2012-05-16T10:11:38.997 に答える