Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="background">
  <div class="bounds">
    <div class="element">
      <span class="inner-text">30</span>
      <span class="option" value="1"></span>
      <span class="option" value="2"></span>
      <span class="option active" value="3"></span>
      <span class="option" value="4"></span>
      <span class="option" value="5"></span>
      <span class="option" value="6"></span>
      <span class="option" value="7"></span>
      <span class="option" value="8"></span>
    </div>
  </div>
  <div class="bounds">
  <div class="element variation-1">
    <span class="inner-text">30</span>
    <span class="option" value="1"></span>
    <span class="option" value="2"></span>
    <span class="option active" value="3"></span>
    <span class="option" value="4"></span>
    <span class="option" value="5"></span>
    <span class="option" value="6"></span>
    <span class="option" value="7"></span>
    <span class="option" value="8"></span>
  </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

body, html {
  height: 100%;
  width: 100%;
}
.background {
  background-color: #111;
  width: 100%;
  height: 100%;
}
.bounds {
  position: relative;
  display: inline-block;
  height: 150px;
  width: 150px;
}
.element {
  position: absolute;
  top: 50px;
  left: 50px;
  margin: 0px;
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: transparent;
  color: #fff;
  font-size: 25px;
  font-weight: 100;
  font-family: "Playfair-display";
  cursor: pointer;
  transition: all 1s linear;
  .inner-text {
    position: relative;
    top: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    padding: 10px 12px;
  }
  .option {
    position: absolute;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: #fff;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    &[value="2"]{
      top: calc(25% - 15px);
      right: -3px;
      left: initial;
      transform: translateY(-50%);
    }
    &[value="3"]{
      top: 50%;
      left: initial;
      right: -15px;
      transform: translateY(-50%);
    }
    &[value="4"]{
      top: calc(75% + 15px);
      right: -3px;
      left: initial;
      transform: translateY(-50%);
    }
    &[value="5"]{
      top: initial;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
    }
    &[value="6"]{
      top: calc(75% + 15px);
      left: -3px;
      transform: translateY(-50%);
    }
    &[value="7"]{
      top: 50%;
      left: -15px;
      transform: translateY(-50%);
    }
    &[value="8"]{
      top: calc(25% - 15px);
      left: -3px;
      transform: translateY(-50%);
    }
    &.active {
      box-shadow: 0 0 9px 1px #fff;
    }
  }
  &.active {
    padding: 20px;
  }
  &.variation-1 {
    .option {
      background-color: #aaa;
      height: 3px;
      width: 3px;
      &.active {
        border: 1px solid #fff;
        box-shadow: none;
      }
    }
  }
}

SassMeister-output.css

body, html {
  height: 100%;
  width: 100%;
}

.background {
  background-color: #111;
  width: 100%;
  height: 100%;
}

.bounds {
  position: relative;
  display: inline-block;
  height: 150px;
  width: 150px;
}

.element {
  position: absolute;
  top: 50px;
  left: 50px;
  margin: 0px;
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: transparent;
  color: #fff;
  font-size: 25px;
  font-weight: 100;
  font-family: "Playfair-display";
  cursor: pointer;
  transition: all 1s linear;
}
.element .inner-text {
  position: relative;
  top: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 10px 12px;
}
.element .option {
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: #fff;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.element .option[value="2"] {
  top: calc(25% - 15px);
  right: -3px;
  left: initial;
  transform: translateY(-50%);
}
.element .option[value="3"] {
  top: 50%;
  left: initial;
  right: -15px;
  transform: translateY(-50%);
}
.element .option[value="4"] {
  top: calc(75% + 15px);
  right: -3px;
  left: initial;
  transform: translateY(-50%);
}
.element .option[value="5"] {
  top: initial;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.element .option[value="6"] {
  top: calc(75% + 15px);
  left: -3px;
  transform: translateY(-50%);
}
.element .option[value="7"] {
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
}
.element .option[value="8"] {
  top: calc(25% - 15px);
  left: -3px;
  transform: translateY(-50%);
}
.element .option.active {
  box-shadow: 0 0 9px 1px #fff;
}
.element.active {
  padding: 20px;
}
.element.variation-1 .option {
  background-color: #aaa;
  height: 3px;
  width: 3px;
}
.element.variation-1 .option.active {
  border: 1px solid #fff;
  box-shadow: none;
}

SassMeister-rendered.html

<div class="background">
  <div class="bounds">
    <div class="element">
      <span class="inner-text">30</span>
      <span class="option" value="1"></span>
      <span class="option" value="2"></span>
      <span class="option active" value="3"></span>
      <span class="option" value="4"></span>
      <span class="option" value="5"></span>
      <span class="option" value="6"></span>
      <span class="option" value="7"></span>
      <span class="option" value="8"></span>
    </div>
  </div>
  <div class="bounds">
  <div class="element variation-1">
    <span class="inner-text">30</span>
    <span class="option" value="1"></span>
    <span class="option" value="2"></span>
    <span class="option active" value="3"></span>
    <span class="option" value="4"></span>
    <span class="option" value="5"></span>
    <span class="option" value="6"></span>
    <span class="option" value="7"></span>
    <span class="option" value="8"></span>
  </div>
  </div>
</div>