Generated by SassMeister.com.

SassMeister-input.scss

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

$diameter: 1000;
$radius: $diameter / 2;
$circlecount: 5;
$rim: ($radius/$circlecount);
$offset: $rim/$circlecount;
$black: #1A0309;
$white: #fff;
$dial-bg-colors: transparent #AA0832 #BE0539 #E50147 #430D1A; // one colour for the bg of each dial - outer to inner
@mixin transform-origin($pos) {
  -webkit-transform-origin: $pos;
     -moz-transform-origin: $pos;
      -ms-transform-origin: $pos;
          transform-origin: $pos;
}

body {
  margin:0 auto;
  background:#701A2C;
  font-family: monospace;
  text-transform: uppercase;
  color:$white;
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left:-($radius - $offset) +px;
}
.circle {
  border-radius: 100%;
  // width: $diameter +px;
  // height: $diameter +px;
  position: absolute;
  box-shadow: 10px 10px 10px 3px rgba(0,0,0,0.15);
  &:hover {
    transform: rotate(10deg);
  }
  h1 {
    height: $diameter +px;
    position: relative;
    margin:0;
    padding:0;
    font-weight:normal;
    font-size: 1.4em;
    color: $black;
    span {
      position: absolute;
      padding-top: 5px;
      @include transform-origin(center center);
    }
  }
  ul {
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    li {
      position:absolute;
      display:block;
      height:$offset +px;
      width:($rim - $offset) +px;
      margin:0;
      list-style:none;
      @include transform-origin(center center);
    }
  }
}

#dial1 {
  box-shadow:none;
}
@for $i from 1 through $circlecount {
  $thisdialcirc: ($diameter * (1 - (($i - 1) / $circlecount)));
  $thisdialtop: (($thisdialcirc/2)-10);
  $thisoffset: (($diameter - $thisdialcirc) / 2);
  #dial#{$i} {
    width:$thisdialcirc +px;
    height:$thisdialcirc +px;
    top:$thisoffset +px;
    left:$thisoffset +px;
    background: nth($dial-bg-colors, $i);
  }
  #dial#{$i} h1 span {
    height: $thisdialcirc +px;
    left: $thisdialtop +px;
  }
  .circle#dial#{$i} ul { 
    height: $thisdialcirc +px;
    width: $thisdialcirc +px;
    li {
      top: $thisdialtop +px;
      padding-right:$offset +px;
      padding-left:($thisdialcirc - $rim) +px;
    }
 }
}
@for $i from 1 through 20 {
  .char#{$i} { transform: rotate(($i*6)+deg); }
}
@for $i from 1 through 5 {
  .item#{$i} { transform: rotate((-40 + ($i*10))+deg); }
}
#selector {
  position:absolute;
  display:block;
  top:480px;
  left:490px;
  height:30px;
  width:510px;
  border: 3px solid white;
  border-radius: 5px;
}
.player {
  height:100px;
  background:#030303;
  background-image: linear-gradient(#37322E, #030303);
}

SassMeister-output.css

body {
  margin: 0 auto;
  background: #701A2C;
  font-family: monospace;
  text-transform: uppercase;
  color: #fff;
}

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -480px;
}

.circle {
  border-radius: 100%;
  position: absolute;
  box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, 0.15);
}
.circle:hover {
  transform: rotate(10deg);
}
.circle h1 {
  height: 1000px;
  position: relative;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 1.4em;
  color: #1A0309;
}
.circle h1 span {
  position: absolute;
  padding-top: 5px;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
.circle ul {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
}
.circle ul li {
  position: absolute;
  display: block;
  height: 20px;
  width: 80px;
  margin: 0;
  list-style: none;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}

#dial1 {
  box-shadow: none;
}

#dial1 {
  width: 1000px;
  height: 1000px;
  top: 0px;
  left: 0px;
  background: transparent;
}

#dial1 h1 span {
  height: 1000px;
  left: 490px;
}

.circle#dial1 ul {
  height: 1000px;
  width: 1000px;
}
.circle#dial1 ul li {
  top: 490px;
  padding-right: 20px;
  padding-left: 900px;
}

#dial2 {
  width: 800px;
  height: 800px;
  top: 100px;
  left: 100px;
  background: #AA0832;
}

#dial2 h1 span {
  height: 800px;
  left: 390px;
}

.circle#dial2 ul {
  height: 800px;
  width: 800px;
}
.circle#dial2 ul li {
  top: 390px;
  padding-right: 20px;
  padding-left: 700px;
}

#dial3 {
  width: 600px;
  height: 600px;
  top: 200px;
  left: 200px;
  background: #BE0539;
}

#dial3 h1 span {
  height: 600px;
  left: 290px;
}

.circle#dial3 ul {
  height: 600px;
  width: 600px;
}
.circle#dial3 ul li {
  top: 290px;
  padding-right: 20px;
  padding-left: 500px;
}

#dial4 {
  width: 400px;
  height: 400px;
  top: 300px;
  left: 300px;
  background: #E50147;
}

#dial4 h1 span {
  height: 400px;
  left: 190px;
}

.circle#dial4 ul {
  height: 400px;
  width: 400px;
}
.circle#dial4 ul li {
  top: 190px;
  padding-right: 20px;
  padding-left: 300px;
}

#dial5 {
  width: 200.0px;
  height: 200.0px;
  top: 400px;
  left: 400px;
  background: #430D1A;
}

#dial5 h1 span {
  height: 200.0px;
  left: 90.0px;
}

.circle#dial5 ul {
  height: 200.0px;
  width: 200.0px;
}
.circle#dial5 ul li {
  top: 90.0px;
  padding-right: 20px;
  padding-left: 100.0px;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}

.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

.char17 {
  transform: rotate(102deg);
}

.char18 {
  transform: rotate(108deg);
}

.char19 {
  transform: rotate(114deg);
}

.char20 {
  transform: rotate(120deg);
}

.item1 {
  transform: rotate(-30deg);
}

.item2 {
  transform: rotate(-20deg);
}

.item3 {
  transform: rotate(-10deg);
}

.item4 {
  transform: rotate(0deg);
}

.item5 {
  transform: rotate(10deg);
}

#selector {
  position: absolute;
  display: block;
  top: 480px;
  left: 490px;
  height: 30px;
  width: 510px;
  border: 3px solid white;
  border-radius: 5px;
}

.player {
  height: 100px;
  background: #030303;
  background-image: linear-gradient(#37322E, #030303);
}