Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="mandate-overview">
    <ul class="mandate-overview__circle-wrapper">
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
    </ul>
  <div class="mandate-overview__party-wrapper">
      <div class="mandate-overview__label">
      <span class="mandate-overview__party" 
        style="background-color:firebrick">V</span>
        <span>19</span>
      </div>
      <div class="mandate-overview__label">
        <span class="mandate-overview__party"
        style="background-color:red">S</span>
        <span>112</span>
      </div>
      <div class="mandate-overview__label">
        <span class="mandate-overview__party"
        style="background-color:lime">MP</span>
        <span>25</span>
      </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:yellow">SD</span>
      <span>20</span>
    </div>
      <span class="mandate-overview__party"
        style="display:none">PP</span>
      <span class="mandate-overview__party"
        style="display:none;">JL</span>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:limegreen">C</span>
      <span>23</span>
    </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:lightblue">FP</span>
      <span>24</span>
    </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:navy">KD</span>
      <span>19</span>
    </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:blue">M</span>
      <span>107</span>
    </div>
</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

* {
  box-sizing: border-box;
}
ul { list-style: none;padding:0;}
@mixin mandate($count) {
  $deg: $count/349*180deg;
  -webkit-transform: rotate($deg);
  -mox-transform: rotate($deg);
  -ms-transform: rotate($deg);
  transform: rotate($deg);
}
$size: 300px;
$padding: 10px;

.mandate-overview {
  width: $size + $padding*2;
  height: $size/2 + $padding;
  margin: 20px;
  padding: 0;
  padding-top: $padding/2;
  padding-left: $padding/2;
  padding-right: $padding/2;
  position: relative;
  text-align: center;
}
.mandate-overview__circle-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-top: $padding/2;
  padding-left: $padding/2;
  padding-right: $padding/2;
  position: relative;
}
.mandate-overview__circle {
  width: $size;
  height: $size;
  position: absolute;
  border: $size/3 solid transparent;
  border-radius: 100%;
  clip: rect(0 $size $size/2 0);
  
   &:nth-child(1) {
     border-color: firebrick;
      @include mandate(0); //19
    }
    &:nth-child(2) {
      border-color: red;
      @include mandate(19); //112
    }
    &:nth-child(3) {
      border-color: lime;
      @include mandate(19+112); //25
    }
    &:nth-child(4) {
      border-color: yellow;
      @include mandate(19+112+25); //20
    }
    &:nth-child(5) {
      border-color: black;
      @include mandate(19+112+25+20); //0
    }
    &:nth-child(6) {
      border-color: black;
      @include mandate(19+112+25+20+0); //0
    }
    &:nth-child(7) {
      border-color: limegreen;
      @include mandate(19+112+25+20+0+0); //23
    }
    &:nth-child(8) {
      border-color: lightblue;
      @include mandate(19+112+25+20+0+0+23); //24
    }
    &:nth-child(9) {
      border-color: navy;
      @include mandate(19+112+25+20+0+0+23+24); //19
    }
    &:nth-child(10) {
      border-color: blue;
      @include mandate(19+112+25+20+0+0+23+24+19); //107
    }
}
.mandate-overview__party-wrapper {
  margin-top: 1em;
  display: inline-block;
}
.mandate-overview__label {
  width: 2em;
  height: 4em;
  float: left;
  text-align: center;
  margin-left: 0.2em;
  
  &:first-child {
    margin-left: 0;
  }
}
.mandate-overview__party {
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  width: 2em;
  height: 2em;
  line-height: 2em;
  display: inline-block;
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
}

.mandate-overview {
  width: 320px;
  height: 160px;
  margin: 20px;
  padding: 0;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  text-align: center;
}

.mandate-overview__circle-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}

.mandate-overview__circle {
  width: 300px;
  height: 300px;
  position: absolute;
  border: 100px solid transparent;
  border-radius: 100%;
  clip: rect(0 300px 150px 0);
}
.mandate-overview__circle:nth-child(1) {
  border-color: firebrick;
  -webkit-transform: rotate(0deg);
  -mox-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mandate-overview__circle:nth-child(2) {
  border-color: red;
  -webkit-transform: rotate(9.7994269341deg);
  -mox-transform: rotate(9.7994269341deg);
  -ms-transform: rotate(9.7994269341deg);
  transform: rotate(9.7994269341deg);
}
.mandate-overview__circle:nth-child(3) {
  border-color: lime;
  -webkit-transform: rotate(67.564469914deg);
  -mox-transform: rotate(67.564469914deg);
  -ms-transform: rotate(67.564469914deg);
  transform: rotate(67.564469914deg);
}
.mandate-overview__circle:nth-child(4) {
  border-color: yellow;
  -webkit-transform: rotate(80.4584527221deg);
  -mox-transform: rotate(80.4584527221deg);
  -ms-transform: rotate(80.4584527221deg);
  transform: rotate(80.4584527221deg);
}
.mandate-overview__circle:nth-child(5) {
  border-color: black;
  -webkit-transform: rotate(90.7736389685deg);
  -mox-transform: rotate(90.7736389685deg);
  -ms-transform: rotate(90.7736389685deg);
  transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(6) {
  border-color: black;
  -webkit-transform: rotate(90.7736389685deg);
  -mox-transform: rotate(90.7736389685deg);
  -ms-transform: rotate(90.7736389685deg);
  transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(7) {
  border-color: limegreen;
  -webkit-transform: rotate(90.7736389685deg);
  -mox-transform: rotate(90.7736389685deg);
  -ms-transform: rotate(90.7736389685deg);
  transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(8) {
  border-color: lightblue;
  -webkit-transform: rotate(102.6361031519deg);
  -mox-transform: rotate(102.6361031519deg);
  -ms-transform: rotate(102.6361031519deg);
  transform: rotate(102.6361031519deg);
}
.mandate-overview__circle:nth-child(9) {
  border-color: navy;
  -webkit-transform: rotate(115.0143266476deg);
  -mox-transform: rotate(115.0143266476deg);
  -ms-transform: rotate(115.0143266476deg);
  transform: rotate(115.0143266476deg);
}
.mandate-overview__circle:nth-child(10) {
  border-color: blue;
  -webkit-transform: rotate(124.8137535817deg);
  -mox-transform: rotate(124.8137535817deg);
  -ms-transform: rotate(124.8137535817deg);
  transform: rotate(124.8137535817deg);
}

.mandate-overview__party-wrapper {
  margin-top: 1em;
  display: inline-block;
}

.mandate-overview__label {
  width: 2em;
  height: 4em;
  float: left;
  text-align: center;
  margin-left: 0.2em;
}
.mandate-overview__label:first-child {
  margin-left: 0;
}

.mandate-overview__party {
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  width: 2em;
  height: 2em;
  line-height: 2em;
  display: inline-block;
}

SassMeister-rendered.html

<div class="mandate-overview">
    <ul class="mandate-overview__circle-wrapper">
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
    </ul>
  <div class="mandate-overview__party-wrapper">
      <div class="mandate-overview__label">
      <span class="mandate-overview__party" 
        style="background-color:firebrick">V</span>
        <span>19</span>
      </div>
      <div class="mandate-overview__label">
        <span class="mandate-overview__party"
        style="background-color:red">S</span>
        <span>112</span>
      </div>
      <div class="mandate-overview__label">
        <span class="mandate-overview__party"
        style="background-color:lime">MP</span>
        <span>25</span>
      </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:yellow">SD</span>
      <span>20</span>
    </div>
      <span class="mandate-overview__party"
        style="display:none">PP</span>
      <span class="mandate-overview__party"
        style="display:none;">JL</span>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:limegreen">C</span>
      <span>23</span>
    </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:lightblue">FP</span>
      <span>24</span>
    </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:navy">KD</span>
      <span>19</span>
    </div>
    <div class="mandate-overview__label">
      <span class="mandate-overview__party"
      style="background-color:blue">M</span>
      <span>107</span>
    </div>
</div>
</div>