LESS: image sprite

image-sprite.less

//Images sprite
//Background definition
@img-sprite: '../images/image-sprite.png';

//Main Class
.imgsprite {
	background: url(@img-sprite) no-repeat 0 0 scroll transparent;
	border:0;
	display:block;
	overflow:hidden;
	margin:0;
	padding:0;
}

//common sizes (if applicable)
@image-w: 600px;
@image-h: 240px;

//image sizes (common or specific)
@image1w: @image-w;		@image1h: @image-h;		@image1y: 0;
@image2w: @image-w;		@image2h: 60px;			@image2y: @image1y - @image1h;
@image3w: @image-w;		@image3h: @image-h;		@image3y: @image2y - @image2h;
@image4w: @image-w;		@image4h: 60px;			@image4y: @image3y - @image3h;
@image5w: @image-w;		@image5h: @image-h;		@image5y: @image4y - @image4h;

.image (@num-img:1,@x:0,@size:1) {
	//Get # of image, x position and image/size
	//Returns class
	@w: 'image@{num-img}w';
	@imagew: e(@w);
	@h: 'image@{num-img}h';
	@imageh: e(@h);
	@imagex: x;
	@y: 'image@{num-img}y';
	@imagey: e(@y);
	.image@{num-img} {
		.imgsprite;
		background-position: @@imagex / @size @@imagey / @size;
		width: @@imagew / @size;
		height: @@imageh / @size;
		background-size: @@imagew / @size;
	}
}

//Function Call
.image (1,0,10); //.image1;
.image (5,0,10); //.image5;