<ul class="mario-art">
  <li class="mario-art--mushroom"></li>
  <li class="mario-art--mario"></li>
  <li class="mario-art--star"></li>
  <li class="mario-art--flower"></li>
  <li class="mario-art--chance"></li>
  <li class="mario-art--boo"></li>
</ul>

<a href="http://una.im/sass-pixel-art">Read the blog post!</a>

//
// Read the blog post here:
// http://una.im/sass-pixel-art
//

// Setting the colors we're syncing up with
$pixel-color-map: (
  'r' : #f00,
  'w': #fff,
  'k': #000,
  'o': transparent,
  't': #83401f,
  'p': #ffbc77,
  'b': #06f,
  'y': #ff0,
  'n': #ff8000,
  'g': #5ac528
);

// Size of the pixels
$pixel-size: 10px !default;

// Mario pixel art matrices!
$pixel-art:(
  mushroom: (
    (o o o o o k k k k k k o o o o o)
    (o o o k k r r r r w w k k o o o)
    (o o k w w r r r r w w w w k o o)
    (o k w w r r r r r r w w w w k o)
    (o k w r r w w w w r r w w w k o)
    (k r r r w w w w w w r r r r r k)
    (k r r r w w w w w w r r w w r k)
    (k w r r w w w w w w r w w w w k)
    (k w w r r w w w w r r w w w w k)
    (k w w r r r r r r r r r w w r k)
    (k w r r k k k k k k k k r r r k)
    (o k k k w w k w w k w w k k k o)
    (o o k w w w k w w k w w w k o o)
    (o o k w w w w w w w w w w k o o)
    (o o o k w w w w w w w w k o o o)
    (o o o o k k k k k k k k o o o o)
  ),

  mario: (
    (o o o r r r r r r o o o o)
    (o o r r r r r r r r r r o)
    (o o t t t p p p k p o o o)
    (o t p t p p p p k p p p o)
    (o t p t t p p p p k p p p)
    (o t t p p p p p k k k k o)
    (o o o p p p p p p p p o o)
    (o o r r b r r r r o o o o)
    (o r r r b r r b r r r r o)
    (r r r r b b b b r r r r o)
    (p p r b y b b y b r p p o)
    (p p p b b b b b b p p p o)
    (p p b b b b b b b b p p o)
    (o o b b b o o b b b o o o)
    (o t t t o o o o t t t o o)
    (t t t t o o o o t t t t o)
  ),
  star: (
    (o o o o o o o k k o o o o o o o)
    (o o o o o o k y y k o o o o o o)
    (o o o o o o k y y k o o o o o o)
    (o o o o o k y y y y k o o o o o)
    (k k k k k k y y y y k k k k k k)
    (k y y y y y y y y y y y y y y k)
    (o k y y y y k y y k y y y y k o)
    (o o k y y y k y y k y y y k o o)
    (o o o k y y k y y k y y k o o o)
    (o o o k y y y y y y y y k o o o)
    (o o k y y y y y y y y y y k o o)
    (o o k y y y y y y y y y y k o o)
    (o k y y y y y k k y y y y y k o)
    (o k y y y k k o o k k y y y k o)
    (k y y k k o o o o o o k k y y k)
    (k k k o o o o o o o o o o k k k)
  ),
  flower: (
    (o o o k k k k k k k k k k o o o)
    (o k k k n n n n n n n n k k k o)
    (k k n n n y y y y y y n n n k k)
    (k n n y y y k w w k y y y n n k)
    (k n n y y y k y y k y y y n n k)
    (k n n n n y y y y y y n n n n k)
    (k k n n n n n n n n n n n n k k)
    (o k k k n n n n n n n n k k k o)
    (o o o k k k k k k k k k k o o o)
    (o k k o o o k g g k o o o k k o)
    (k g g k k o k g g k o k k g g k)
    (k g g g g k k g g k k g g g g k)
    (k g g g g g k g g k g g g g g k)
    (o k g g g g k g g k g g g g k o)
    (o o k k g g g g g g g g k k o o)
    (o o o o k k k k k k k k o o o o)
  ),
  chance: (
    (o t t t t t t t t t t t t t t o)
    (t p p p p p p p p p p p p p p k)
    (t p k p p p p p p p p p p k p k)
    (t p p p p t t t t t p p p p p k)
    (t p p p t t k k k t t p p p p k)
    (t p p p t t k p p t t k p p p k)
    (t p p p t t k p p t t k p p p k)
    (t p p p p k k p t t t k p p p k)
    (t p p p p p p t t k k k p p p k)
    (t p p p p p p t t k p p p p p k)
    (t p p p p p p p k k p p p p p k)
    (t p p p p p p t t p p p p p p k)
    (t p p p p p p t t k p p p p p k)
    (t p k p p p p p k k p p p k p k)
    (t p p p p p p p p p p p p p p k)
    (k k k k k k k k k k k k k k k k)
  ),
  boo: (
    (o o o o o k k k k k o o o o o o)
    (o o o k k w w w w w k k o o o o)
    (o o k w w w w w w w w w k o o o)
    (o k w w w w w w w w w w w k o o)
    (o k w k w k w w w w w w w w k o)
    (k w w k w k w w w w k k k w w k)
    (k w w k w k w w w k w w k w w k)
    (k w w w w w w w w w w w k w k o)
    (k w r w r w r w w w w k w w w k)
    (k w r r r r r w w w w w w w w k)
    (k w r r r r r w w w w w w w w k)
    (o k w r r r r r w w w w w w w k)
    (o k w r w r w r w w w w w w k o)
    (o o k w w w w w w w w w w k o o)
    (o o o k k w w w w w w k k o o o)
    (o o o o o k k k k k k o o o o o)
  ),
);

// Function to read the matrix and pixelize it!
@function pixelize($matrix, $size){
    $l: length($matrix); // length of the entire
    $sh: ''; // shadows list
    $i: $l; // length of the line

    // read through the length of the matrix and decide on the box shadow color and position
    @for $i from 1 through $l{
      $row: nth($matrix,$i); //

      @for $j from 1 through length($row){
          $item: nth($row,$j);

          @if map-has-key($pixel-color-map, $item) {
            $sh:  $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + map-get($pixel-color-map, $item);
          } @else {
            @warn 'there is no color specified in "$pixel-color-map" for: "#{$item}"';
          }

        @if not ($j == length($row) and $i == $l) {
          $sh: $sh + ',';
        }
      }
    }

    @return unquote($sh);
}

// Mixin to style each item
@mixin style-item($matrix, $size){
  position: relative; // pixels stack next to each other

  // set width & height of icon based on size of pixels
  width:($size * length(nth($matrix,1)));
  height:($size * length($matrix));

  &:after{
    content: '';

    // position everything from the top left corner
    position: absolute;
    top: (-$size);
    left: (-$size);
    width: $size;
    height: $size;

    // this is where we make the stitch
    box-shadow: pixelize($matrix,$size);
  }
}

// Page styling
body {
  background: #97f0fa;
}

.mario-art{
  list-style: none;
  margin: 3em auto;
  max-width: 800px;
  padding: 0;
  text-align: center;
  width: 100%;

  li {
    display: inline-block;
    margin: 2em;
  }

   @each $key, $value in $pixel-art{
    &--#{$key}{
      @include style-item($value, $pixel-size);
    }
  }
}

// just styling the link to the post :)

a {
  text-align: center;
  display: block;
  width: 100%;
  color: #000;
  font-family: 'Open Sans', sans-serif;
}