Help please

[ghost]

I love the plugin. It's great. However, I am new to using sprites and I do not know how to call a particular image in my stylesheets. Can you please provide an example in the documentation? Thanks.

[littlebusters]

Hi jkinley!

Here is the sample code with scss.

// Generated code with the plugin (Copy & paste on your scss)---------------
@mixin cssSprite( $spriteVals ) {
    width: nth( $spriteVals, 1 );
    height: nth( $spriteVals, 2 );
    background-repeat: no-repeat;
    background-image: url( #{ nth( $spriteVals, 3 ) } );
    background-position: nth( $spriteVals, 4 ) nth( $spriteVals, 5 );
    @media only screen and ( -webkit-min-device-pixel-ratio: 2 ), only screen and ( min-device-pixel-ratio: 2 ) {
        background-image: url( #{ nth( $spriteVals, 6 ) } );
        background-size: $bgiSizeW $bgiSizeH;
    }
}
$icon-spritePath: '../img/icon-sprite';
$icon-spriteURL: $icon-spritePath + '.png';
$icon-spritex2URL: $icon-spritePath + '@2.png';
$bgiSizeW: 200px;
$bgiSizeH: 200px;
$instagram: 64px 64px $icon-spriteURL -100px -100px $icon-spritex2URL;
$pinterest: 64px 64px $icon-spriteURL 0px -100px $icon-spritex2URL;
$facebook: 64px 64px $icon-spriteURL -100px 0px $icon-spritex2URL;
$twitter: 64px 64px $icon-spriteURL 0px 0px $icon-spritex2URL;
// ---------------------------------------------------------------------

// And you write this code.
.icon-twitter {
    @include cssSprite( $twitter );
}
.icon-facebook {
    @include cssSprite( $facebook );
}
.icon-pinterest {
    @include cssSprite( $pinterest );
}
.icon-instagram {
    @include cssSprite( $instagram );
}

You can try this code on sassmeister.

Thanks!