Generated by SassMeister.com.

SassMeister-input-HTML.html

<link href="http://necolas.github.io/normalize.css/3.0.2/normalize.css">
<div id="maggie">
  <div class="head">
    <div class="no-border body head-main"></div>
    
    
    <div class="body hair hair2"></div>
    <div class="body hair hair1"></div>
    <div class="body hair hair3"></div>
    
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

#maggie *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}
#maggie {
  position:relative;
  width:111px;
  height:106px;
  margin: 0 auto;
  
  .head * {
    border:1px solid #110b00;
  }
  .head {
    .no-border {
      border:none;
    }
    .hair {
      border-right:none;
      border-bottom:none;
      border-top-left-radius:2px;
      -webkit-border-top-left-radius:2px;
    }
    .hair1 {
      top: 89px;
      left: 31px;
      width: 9px;
      height: 14px;
      border-top-left-radius:4px;
      transform: rotate(-97deg) skew(0deg, 8deg);
    }
    .hair2 {
      top:73px;
      left:13px;
      width:18px;
      height:20px;
      border-top-left-radius:4px;
      transform: rotate(-88deg) skew(0deg,14deg);
    }
    .hair3
  {
    top: 51px;
    left: 6px;
    width: 22px;
    height: 21px;
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    transform: rotate(-62deg) skew(3deg, 18deg);
    -ms-transform: rotate(-62deg) skew(3deg, 18deg);
    -webkit-transform: rotate(-62deg) skew(3deg, 18deg);
    }
  }
}

SassMeister-output.css

#maggie * {
  position: absolute;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

#maggie {
  position: relative;
  width: 111px;
  height: 106px;
  margin: 0 auto;
}
#maggie .head * {
  border: 1px solid #110b00;
}
#maggie .head .no-border {
  border: none;
}
#maggie .head .hair {
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 2px;
  -webkit-border-top-left-radius: 2px;
}
#maggie .head .hair1 {
  top: 89px;
  left: 31px;
  width: 9px;
  height: 14px;
  border-top-left-radius: 4px;
  transform: rotate(-97deg) skew(0deg, 8deg);
}
#maggie .head .hair2 {
  top: 73px;
  left: 13px;
  width: 18px;
  height: 20px;
  border-top-left-radius: 4px;
  transform: rotate(-88deg) skew(0deg, 14deg);
}
#maggie .head .hair3 {
  top: 51px;
  left: 6px;
  width: 22px;
  height: 21px;
  border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  transform: rotate(-62deg) skew(3deg, 18deg);
  -ms-transform: rotate(-62deg) skew(3deg, 18deg);
  -webkit-transform: rotate(-62deg) skew(3deg, 18deg);
}

SassMeister-rendered.html

<link href="http://necolas.github.io/normalize.css/3.0.2/normalize.css">
<div id="maggie">
  <div class="head">
    <div class="no-border body head-main"></div>
    
    
    <div class="body hair hair2"></div>
    <div class="body hair hair1"></div>
    <div class="body hair hair3"></div>
    
  </div>
</div>