Adaptive sprite. Scss functions

_sprite.scss

// Adaptive sprite. Scss functions 
// https://gist.github.com/MrSwed/9b74275a7c5fa82c78619f2b7b9bd4ba
// based on less mixins 
// https://gist.github.com/MrSwed/162bc57a6225ff139d5299b6fb7944b3

// Defaults

$fzr: 16px; // html rem
$fz: $fzr; // body, current
$SpriteImgUrl: url(../images/sprite.png);
$SpriteWidth: 256px; // set width of source sprite image
$SpriteHeight: 128px; // set height of source sprite image
$SpriteItemsW: 4rem; // items width
$SpriteItemsH: 4rem; // items height

// functions 
// STRIP UNIT
// It strips the unit of measure and returns it
@function strip-unit($num) {
	@return $num / ($num * 0 + 1);
}
// SASS function to calculate needed units
// https://gist.github.com/MrSwed/958077f384bfeb62cc799b0946999590
@function calcSize($size,$base:$fzr,$unit:1rem,$calc:true) {
	@if ($calc) {
		@return calc(#{$unit} * #{strip-unit($size)} / #{strip-unit($base)});
	} @else {
		@return $unit * $size / $base;
	}
	/* Examples
				font-size: calcSize(18px);                |    font-size: calc(1rem * 18 / 16);
				font-size: calcSize(14px,16px,1em,false); |    font-size: 0.875em;
			*/
}
// mixins

@mixin sprite($url:$SpriteImgUrl,$fzrN: $fzr,$fzN: $fz, 
               $swn: $SpriteWidth, $shn: $SpriteHeight,$siwn: $SpriteItemsW, $sihn: $SpriteItemsH) {
	background-image: inspect($url);
	background-repeat: no-repeat;
	background-position: 100000% 100000%;
	background-size: auto;
	$fzr: $fzrN;
	$fz: $fzN;
	$SpriteWidth: $swn;
	$SpriteHeight: $shn;
	$SpriteItemsW: $siwn;
	$SpriteItemsH: $sihn;
}
@mixin spriteBGSize($w:auto,$h:auto,$sw:$SpriteWidth,$sh:$SpriteHeight) {
	@if $h == auto and $h != $w {
		background-size: (100% * $sw / $w) $h;
	} @else if $w == auto and $h != $w {
		background-size: $w (100% * $sh / $h);
	} @else {
		background-size: (100% * $sw / $w) (100% * $sh / $h);
	}
}
@mixin spriteItemPos($x,$y,$iw:$SpriteItemsW,$ih:$SpriteItemsH) {
	background-position: calc(50% - (#{$x} * #{$iw} / 2)) calc(50% - (#{$y} * #{$ih} / 2));
}
@mixin spriteSquire($x:1) {
	//@extend %spriteDIB;
	width: calcSize($fz*$x);
	height: calcSize($fz*$x);
	@include spriteBGSize(auto, $fz*$x);
}
@mixin spriteBlock($w:1,$h:1) {
	//@extend %spriteDIB;
	width: calcSize($fz*$w);
	height: calcSize($fz*$h);
	@include spriteBGSize($fz*$w, $fz*$h);
}
@mixin spriteSize($w:$fzr,$h:$fzr,$base:$fzr,$unit:1rem,$calc:true) {
	width: calcSize($w, $base, $unit, $calc);
	height: calcSize($h, $base, $unit, $calc);
	@include spriteBGSize($w, $h);
}
// extends 

%sprite {
	@include sprite();
}
%spriteDIB {
	@extend %sprite;
	display: inline-block;
	vertical-align: middle;
}
%sprite-pseudo {
	@extend %sprite;
	content: '';
	font-size: 1rem;
	transition: font-size 350ms;
	@extend %spriteDIB;
}