Frontsize - Set sprite position example

set-sprite-example.html

<div class="block">Pencil</div>
<div class="my-sprite pencil"></div>

<div class="block top-margin">Ruler</div>
<div class="my-sprite ruler"></div>

<div class="block top-margin">Eraser</div>
<div class="my-sprite eraser"></div>

<div class="block top-margin">Bin</div>
<div class="my-sprite bin"></div>

sprite-position.less

.my-sprite {
    @width       : 32px;
    @height      : @width;
    @imageWidth  : 64px;
    @imageHeight : @imageWidth;

    .spriteRetina("standard-sprite.png", "retina-sprite.png", @width, @height, @imageWidth, @imageHeight);
    
    &.pencil {
        .spritePosition(0, 0, @width, @height);
    }
    
    &.ruler {
        .spritePosition(1, 0, @width, @height);
    }
    
    &.eraser {
        .spritePosition(0, 1, @width, @height);
    }
    
    &.bin {
        .spritePosition(1, 1, @width, @height);
    }
}

spriteRetina

Param	Default value	Required	Comment
@defaultImage	none	yes
@retinaImage	none	yes
@width	none	yes
@height	@width	yes
@imageWidth	none	yes
@imageHeight	none	yes
@rootPath	@root-path	no	Frontsize var from app.less

spritePosition

Param	Default value	Required	Comment
@horizontalPosition	0	no
@verticalPosition	0	no
@width	0	no
@height	@width	no