Transforming Menu Icon

_menu-icon.scss

@mixin menu-icon( $width, $height, $thickness ) {
	$width: $width * 1px;
	$height: $height * 1px;
	$thickness: $thickness * 1px;
	
	$margin: (($height - ($thickness * 3)) / 2);
	$shift: $margin + $thickness;
	
	.bar {
		display: block;
		width: $width;
		margin: 0 auto;
		border-bottom: $thickness solid;
		transform-origin: center center;
		transition: transform .2s, border .2s;
		
		&.middle {
			margin: $margin auto;
		}
		
		.nav-open & {
			&.top {
				transform: tranlateY($shift) rotate(45deg);
			}
			&.middle {
				transform: scaleX(0);
			}
			&.bottom {
				transform: translateY($shift * -1) rotate(-45deg);
			}
		}
	}
}