index.jade

header.demo-header 
  h1 Cross-stich
  p
    | Little bits of 8-bit goodness generated
    | from a clutch of sass lists. 
ul.icons
  each icon in ['hamburger','close','diamond','cross','heart','doublearr']
    li(class='icons--#{icon}')

Pixel-art-out-of-box-shadow-magicerizer.markdown

Pixel art out of box shadow magicerizer

SASS mixin that hands a maxtrix of lists to a function, to create a bit of pixel art out of box shadows. Co-made with @shadowmint. TODO - multiple colours!

A Pen by Jack Armley on CodePen.

License.

style.scss

@function icon($matrix,$size,$color){
    $l: length($matrix);
    $sh: '';
    $i: $l;
    @for $i from 1 through $l{
      $row: nth($matrix,$i);
      @for $j from 1 through length($row){
          $item: nth($row,$j);
          @if $item == x{
            $sh:  $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + $color;
          }@else{
            $sh:  $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + transparent;
          }
        @if not ($j == length($row) and $i == $l) {
          $sh: $sh + ',';
        }
      }
    }
    @return unquote($sh);
}

@mixin icon($matrix,$size,$color,$radius:0){
  position:relative;
  width:($size * length(nth($matrix,1)));
  height:($size * length($matrix));
  &:after{
    content:' ';
    position:absolute;
    top:(-$size);
    left:(-$size);
    width:$size;
    height:$size;
    border-radius:$radius;
    box-shadow:
      icon($matrix,$size,$color);
  }
}

$bodybg: #DFFF26;
$iconcolor: #727F20;
$textcolor: $iconcolor;
$iconsize: 8px;
$icons:(
  hamburger:(
    (x x x x x)
    (o o o o o)
    (x x x x x)
    (o o o o o)
    (x x x x x)
  ),
  close:(
    (x o o o x)
    (o x o x o)
    (o o x o o)
    (o x o x o)
    (x o o o x)
  ),
  diamond:(
    (o o x o o)
    (o x o x o)
    (x o o o x)
    (o x o x o)
    (o o x o o)
  ),
  cross:(
    (o o x o o)
    (o o x o o)
    (x x x x x)
    (o o x o o)
    (o o x o o)
  ),
  heart:(
    (o x o x o)
    (x x x x x)
    (x x x x x)
    (o x x x o)
    (o o x o o)
  ),
  doublearr:(
    (o o x o o)
    (o x o x o)
    (x o x o x)
    (o x o x o)
    (x o o o x)
  )
);
$headerfont:'Oswald';
$bodyfont:'PT Sans';

@import url(http://fonts.googleapis.com/css?family=Oswald:300,700|PT+Sans);html,
body{
  height:100%;
}
html{
  background:$bodybg;
}
body{
  box-sizing:border-box;
  width:100%;
  max-width:600px;
  margin:auto;
  padding:60px;
  color:$textcolor;
  font:normal normal 120%/1.5em $bodyfont, sans-serif;
}
.demo-header{
  margin-bottom:2em;
  text-align:center;
  h1{
    margin:0;
    color:#fff;
    font:700 3em/1.5em $headerfont;
    text-shadow:3px 3px 0 $iconcolor;
  }
}
.icons{
   margin:0;
    padding:0;
   list-style:none;
   text-align:center;
   @at-root{
     [class^="icons--"]{
       display:inline-block;
       margin:20px;
       border:25px solid transparent;
     }
   }
   @each $key,$value in $icons{
    &--#{$key}{
      @include icon(
        $value,
        $iconsize,
        $iconcolor
      );
    }
  } 
}