Generated by SassMeister.com.

SassMeister-input-HTML.jade

.icon

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$close:
  x o x,
  o x o,
  x o x
;

$hamburger:
  x x x x,
  o o o o,
  x x x x,
  o o o o,
  x x x x
;

@function getcolor($char,$color){
  $char-col:(
    x: $color,
    o: transparent
  );
  $charcolor: map-get($char-col, $char);
  @return #{$charcolor};
}

@function makeicon($rawicon,$pixelsize,$iconsize,$color){

    // Get some vars
    $icon:'';
    $iconw: nth($iconsize,1);
    $iconh: nth($iconsize,2);
    $rownum: 0;
    $rowcharnum: 1;
    $charcount: 0;
    $totalchars: 0;

    // Get total characters first
    @each $row in $rawicon{
        @each $char in $row{
          $totalchars: $totalchars + 1;
        }
    }

  // Run box shadow generatoor
    @each $row in $rawicon{
        @each $char in $row{

            // Make box shadow value
            $icon:
                $icon +
                // x shadow
                ($pixelsize * $rowcharnum) + ' ' +
                // y shadow
                ($pixelsize * $rownum) + ' ' +
                // color
                getcolor($char,$color);

            // Update counters
            $charcount: $charcount + 1;
            $rowcharnum: $rowcharnum + 1;
            @if $rowcharnum >= ($iconw + 1){
                $rowcharnum: 1;
            }
            @if $charcount < $totalchars{
                $icon: $icon + ',';
            }
        }
    // Update row counter
    $rownum: $rownum + 1;
    }
  @return unquote($icon);
}

@mixin makeicon($rawicon,$pixelsize:1px,$color:black){
    
    // Get icon size
    $iconw: length(nth($rawicon,1));
    $iconh: length($rawicon);
    
    // Set styles
    position: relative;
    width: ($pixelsize * $iconw);
    height: ($pixelsize * $iconh);
    &:before{
      content:' ';
      position: absolute;
      top: 0;
      left: (-$pixelsize);
      display: block;
      width: $pixelsize;
      height: $pixelsize;
      box-shadow: makeicon($rawicon,$pixelsize,$iconw $iconh,$color);
    }
    
}

// Demo
.icon{
    @include makeicon($hamburger,3px,teal);
}

SassMeister-output.css

.icon {
  position: relative;
  width: 12px;
  height: 15px;
}
.icon:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: -3px;
  display: block;
  width: 3px;
  height: 3px;
  box-shadow: 3px 0px teal,6px 0px teal,9px 0px teal,12px 0px teal,3px 3px transparent,6px 3px transparent,9px 3px transparent,12px 3px transparent,3px 6px teal,6px 6px teal,9px 6px teal,12px 6px teal,3px 9px transparent,6px 9px transparent,9px 9px transparent,12px 9px transparent,3px 12px teal,6px 12px teal,9px 12px teal,12px 12px teal;
}

SassMeister-rendered.html

<div class="icon"></div>