Pixel Mixin

@function pixels($matrix, $type) {
	$value: '';
	$width: length(nth($matrix, 1));
	$height: length($matrix);

	$gradients: ();
	$positions: ();
	$pixel-sizes: ();

	//   //ROW
	@for $rowInt from 1 through $height {
		$clr: ''; // COLUMN
		@for $colInt from 1 through $width {
			$v: nth(nth($matrix, $rowInt), $colInt);
			@if str-index($v, '*') {
				$clr: map-get($pixel-colors, nth(nth($matrix, $rowInt), $colInt));
			}
			@else if $v {
				$clr: map-get($pixel-colors, nth(nth($matrix, $rowInt), $colInt));
			}

			$gradient: 'linear-gradient(to bottom,#{$clr},#{$clr})';

			$left: #{($pixel-size * ($rowInt - 1))};
			$top: #{($pixel-size * ($colInt - 1))};
			$position: '#{$top}px #{$left}px';
			$sz: '#{$pixel-size}px #{$pixel-size}px';

			$gradients: prepend($gradients, $gradient);
			$positions: prepend($positions, $position);
			$pixel-sizes: prepend($pixel-sizes, $sz);
		}
	}
	$value: '';
	@if $type == 'image' {
		$value: to-string($gradients, ',');
	}
	@if $type == 'position' {
		$value: to-string($positions, ',');
	}
	@if $type == 'size' {
		$value: to-string($pixel-sizes, ',');
	}
	@if $type == 'height' {
		$value: #{$height * $pixel-size}px;
	}
	@if $type == 'width' {
		$value: #{$width * $pixel-size}px;
	}
	@return $value;
}

@mixin pixels($val) {
	content: '';
	background-image: pixels($val, 'image');
	background-position: pixels($val, 'position');
	background-size: pixels($val, 'size');
	width: pixels($val, 'width');
	height: pixels($val, 'height');
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}