An approach to manage icons using mixins(LessCSS) and CSS Sprites

icons.less

/*
*
* Icon index
* by @dic7 (github: ivanmendoza)
* 
*/

/*
 * SPRITE
 * url: ../images/icons.png
 * Col #: Different icon
 * Row 1: normal view
 * Row 2: hover view
 * Row 3: active view
 */

 /*
 * HTML
 * <a href="#" class="button"><span class="icon"><span> Text</a>
 * 
 * USE
 * .button{
 * 		#icons .sample1;
 * 		#icons .left;
 * 	}
 */

@dirImages: "../images";
@icon_w: 	16px; // width
@icon_h: 	16px; // height

#icons{
	.shape(@posX: 0, @posY: 0){
		display: block;
		width: @icon_w;
		height: @icon_h;
		margin-top: 0;
		background: url("@{dirImages}/icons.png") no-repeat @posX*@icon_w*-1 @posY*@icon_h*-1;
	}
	.left{
		.icon{
			float: left;
			clear: none;
			margin-right:.5em;
		}
	}
	.right{
		.icon{
			float: right;
			clear: none;
			margin-left: .5em;
		}
	}
	
	.sample1{
		.icon{#icons .shape(0, 0);}
		&:hover, &:focus{
			.icon{#icons .shape(0, 1);}
		}
		&.active{
			.icon{#icons .shape(0, 2);}
		}
	}
	.sample1{
		.icon{#icons .shape(1, 0);}
		&:hover, &:focus{
			.icon{#icons .shape(1, 1);}
		}
		&.active{
			.icon{#icons .shape(1, 2);}
		}
	}

}