Sass Round Progress Bar

SOURCE: http://codepen.io/seanstopnik/pen/Abyhj

by Annie Lagang

HTML

<div class="card">
  <div class="donut-chart chart1">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span></span>
    </div>
  </div>
</div>

<div class="card">
  <div class="donut-chart chart2">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span></span>
    </div>
  </div>
</div>

<div class="card">
  <div class="donut-chart chart3">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span></span>
    </div>
  </div>
</div>

<div class="card">
  <div class="donut-chart chart4">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span></span>
    </div>
  </div>
</div>

SCSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #e1e1e1;
}

.card {
  float: left;
  background: #fff;
  padding: 20px;
  margin: 0 20px 0 0;
}


// Donut Chart Mixin
.donut-chart {
  position: relative;
  border-radius: 50%;
  overflow: hidden;

  .slice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .chart-center {
    position: absolute;
    border-radius: 50%;
  
    span {
      display: block;
      text-align: center;
    }
  }
}

@mixin donut-chart($name, $perc, $size, $width, $base, $center, $color, $textColor: $color, $textSize: 40px) {
  
  // removed excess variables
  //$color2: $color;
  //$base2: $base;
	$deg: ($perc/100*360)+deg;
	$deg1: 90deg;
	$deg2: $deg;
	
	// If percentage is less than 50%
	@if $perc < 50 {
	  $temp: $base;
		$base: $color;
    $color: $temp;
    //$color2: $base2; // excess variable
    $deg1: ($perc/100*360+90)+deg;
		$deg2: 0deg;
	}
    
  .donut-chart {
    &#{$name} {
      width: $size;
      height: $size;
      background: $base;
      
      .slice {
        &.one {
          clip: rect(0 $size $size/2 0);
          -webkit-transform: rotate($deg1);
          transform: rotate($deg1);
          background: $color;
        }
        
        &.two {
          clip: rect(0 $size/2 $size 0);
          -webkit-transform: rotate($deg2);
          transform: rotate($deg2);
          //background: $color2;
          background: $color; // always same with slice 1
        }
      }
      
      .chart-center {
        top: $width;
        left: $width;
        width: $size - ($width * 2);
        height: $size - ($width * 2);
        background: $center;
        
        span {
          font-size: $textSize;
          line-height: $size - ($width * 2);
          color: $textColor;
        
          &:after {
          content: '#{$perc}%';
          }
        }
      }
    }
  }
} // mixin

// Charts
@include...