Sprites helper

List of the available mixins

Mixin name	Example	Code
sprite	Gist example	Source code
spritePosition	Gist example	Source code
spriteCoordinates	Gist example	Source code
scaleBackgroundSize	Gist example	Source code
setSprite	Gist example	Source code
spriteRetina	Gist example	Source code
scaleSprite	Gist example	Source code

===

####sprite

Sets a sprite to a selector, it's useful for non-retina or SVG sprites

Param	Default value	Required	Comment
@image	none	yes
@width	none	yes
@height	@width	no
@backgroundSize	auto	no
@rootPath	@root-path or ''	no	Frontsize var from app.less

Gist example

===

####spritePosition

Sets a sprite coordinate for a sprite selector adjoining class, a faster way to do it is setSprite mixin

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

Gist example

===

####spriteCoordinates

Sets the sprite negative coordinates to be used with px (it adds - symbol automatically), this is an old mixin, a faster way to do it is setSprite mixin

Param	Default value	Required
@positionX	0	no
@positionY	0	no

Gist example

===

####setSprite

Adds an adjoining class selector to the container sprite

Param	Default value	Required	Comment
@selector	none	yes
@horizontalPosition	0	yes
@verticalPosition	0	yes
@width	0	yes
@height	@width	no
@scale	1	no

Gist example

===

####scaleSprite

Scales background-size of the sprite and the selector's html element size

Param	Default value	Required	Comment
@scale	none	yes
@spriteWidth	none	yes
@spriteHeight	none	yes
@backgroundWidth	none	yes
@backgroundHeight	none	yes

Gist example

===

####scaleBackgroundSize

Scales background-size of the selector, a faster way to do it is scaleSprite mixin

Param	Default value	Required	Comment
@scale	none	yes
@width	none	yes
@height	@width	no

Gist example

===

####spriteRetina

Sets a sprite to a selector, with retina and non retina media query

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 or ''	no	Frontsize var from app.less

Gist example