@function pixels($matrix,$type,$pixel-colors) {
  $value: "";
  $width: length(nth($matrix, 1));
  $height: length($matrix);

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

  //   //ROW
  @for $rowInt from 1 through $height {
    $clr: ""; // COLUMN
    @for $colInt from 1 through $width {
      $v: nth(nth($matrix, $rowInt), $colInt);
      @debug $v;

      @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: #{($size * ($rowInt - 1))};
      $top: #{($size * ($colInt - 1))};
      $position: "#{$top}px #{$left}px";
      $sz: "#{$size}px #{$size}px";

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

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

// // Example

// // Define A pixel grid
// $diamond: (
//    (p, p, p, p, p, p, p, p, p),
//    (p, w, w, w, w, w, w, w, p),
//    (p, w, w, w, g, w, w, w, p),
//    (p, w, w, g, w, g, w, w, p),
//    (p, w, g, w, p, w, g, w, p),
//    (p, w, w, g, w, g, w, w, p),
//    (p, w, w, w, g, w, w, w, p),
//    (p, w, w, w, w, w, w, w, p),
//    (p, p, p, p, p, p, p, p, p)
// );

// // Set the Colors

// $pixel-colors: (
//   "g": #01ad01,
//   "w": white,
//   "b": black,
//   "bl": #6b8cff,
//   "p": purple,
//   "o": #e7631b,
//   "y": #fca74c,
//   "t": transparent
// );

// // Set a pixel size (in pixels)
// $pixel-size: 5;

// // Set the grid on a div. 
// .diamond {
//   @include pixels($diamond, $pixel-colors, $pixel-size);
// }