pie-chart.css.sass

@mixin pie-chart($sections, $diameter, $initial-rotation: 0, $gradient: true)
  position: relative
  width: $diameter
  height: $diameter

  $sections-sum: 0 + $initial-rotation
  @for $i from 1 through length($sections)
    $section: nth($sections, $i)

    .pie-chart-section:nth-child(#{$i})
      position: absolute
      width: $diameter
      height: $diameter
      transform: rotate($sections-sum * 3.6 + deg)
      -webkit-transform: rotate($sections-sum * 3.6 + deg)
      $sections-sum: $sections-sum + nth($section, 1)
      @if nth($section, 1) < 50
        clip: rect(0, $diameter, $diameter, $diameter/2)
        z-index: 1

      &:after
        content: ""
        position: absolute
        width: $diameter
        height: $diameter
        border-radius: $diameter/2
        background-color: nth($section, 2)
        transform: rotate(nth($section, 1) * 3.6 + deg)
        -webkit-transform: rotate(nth($section, 1) * 3.6 + deg)
        @if nth($section, 1) < 50
          clip: rect(0, $diameter/2, $diameter,0)
        @if $gradient
          background: radial-gradient(nth($section, 2) $diameter/10, darken(nth($section, 2), 13%) $diameter/2)
          background: -webkit-radial-gradient(nth($section, 2) $diameter/10, darken(nth($section, 2), 13%) $diameter/2)