Adaptive sprite. Less functions

sprite.less

// Adaptive sprite. Less functions 
// https://gist.github.com/MrSwed/162bc57a6225ff139d5299b6fb7944b3

@fzr: 16px;
@fz: @fzr;

// functions 

// Convert units 
// https://gist.github.com/MrSwed/00c35fa57dd820eab7434149b72fa695
.convert(@param,@px,@parent:@fz,@u:1em) {
		@{param}: @u * @px / @parent;
}
// Define sprite 
@SpriteWidth: 256px; // set width of image
@SpriteHeight: 128px; // set height of image
@SpriteItemsW: 4rem; // items width
@SpriteItemsH: 4rem; // items height

.spriteSize(@w,@h) when (@h = auto), (ispercentage(@h)) {
	.spriteSize(0, 0);
	background-size: (100% * @SpriteWidth / @w)  @h;
}
.spriteSize(@w,@h) when (@w = auto), (ispercentage(@w)) {
	.spriteSize(0, 0);
	background-size: @w (100% * @SpriteHeight / @h);
}
.spriteSize(@w,@h) when ( default() ) {
	.spriteSize(0, 0);
	background-size: (100% * @SpriteWidth / @w) (100% * @SpriteHeight / @h);
}
.spriteItemPos(@x,@y) {
	background-position: ~"calc(50% - ( @{x} * @{SpriteItemsW} / 2 ) )" ~"calc(50% - ( @{y} * @{SpriteItemsH} / 2 ) )";
}

// mixins

.sprite(@ex) when (@ex = true) {
	background-image: url(images/sprite.png);
	background-repeat: no-repeat;
	background-position: 100000% 100000%;
	background-size: auto;
}
.sprite(@ex) when (default()) {
	&:extend(.sprite);
}
.sprite {
	.sprite(true);
}
.spriteDIB(@ex) when (@ex = true) {
	display: inline-block;
	vertical-align: middle;
}
.spriteDIB(@ex) when (default()) {
	&:extend(.spriteDIB);
}
.spriteDIB {
	.spriteDIB(true)
}
.spriteSquire(@x:1) {
	.spriteDIB(false);
	.convert(width, @fz*@x);
	.convert(height, @fz*@x);
	.spriteSize(auto, @fz*@x);
}
.spriteBlock(@x:1,@y:1) {
	.spriteDIB(false);
	.convert(width, @fz*@x);
	.convert(height, @fz*@y);
	.spriteSize(@fz*@x, @fz*@y);
}
.sprite-before(@ex) when (@ex = true) {
	.sprite(false);
	content: '';
	font-size: 1rem;
	transition: font-size 350ms;
	.spriteDIB(false);
}
.sprite-before(@ex) when (default()) {
	&:extend(.sprite-before);
}
.sprite-before {
	.sprite-before(true);
}

//// /* call examples : separate class * /
//.ico {
//	@fz: @fzr;
//	&:before {
//		.sprite-before()
//	}
//
//	&.search, &.basket {
//		&:before { .spriteSquire(3); }
//	}
//
//	&.search:before { background-position: 00% 00%; }
//	&.basket:before { background-position: 43% 00%; }
//
//	&.help, &.delivery, &.payment, &.discounts, &.refund,
//	&.in, &.vk, &.fb, &.yt {
//		&:before { .spriteSquire(2); }
//	}
//
//	&.help:before { background-position: -1.2% 60%; }
//	&.delivery:before { background-position: 24% 60%; }
//	&.payment:before { background-position: 50% 60%; }
//	&.discounts:before { background-position: 74% 60%; }
//	&.refund:before { background-position: 99% 60%; }
//	&.in:before { background-position: 0% 100%; }
//	&.vk:before { background-position: 24% 100%; }
//	&.fb:before { background-position: 50% 100%; }
//	&.yt:before { background-position: 75% 00%; }
//}

/*  */