Generated by SassMeister.com.

SassMeister-input.scss

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

@for $i from 1 through 8 {
  .main .line:nth-child(#{$i}){
    transform: rotate3d(0, 0, 1, 22.5deg * $i);
  }
}

$width: 190px;

@for $i from 1 through 8 {
  .main .line:nth-child(#{$i}):before{
    top: $width - 25px * ($i - 1);
  }
}

SassMeister-output.css

.main .line:nth-child(1) {
  transform: rotate3d(0, 0, 1, 22.5deg);
}

.main .line:nth-child(2) {
  transform: rotate3d(0, 0, 1, 45deg);
}

.main .line:nth-child(3) {
  transform: rotate3d(0, 0, 1, 67.5deg);
}

.main .line:nth-child(4) {
  transform: rotate3d(0, 0, 1, 90deg);
}

.main .line:nth-child(5) {
  transform: rotate3d(0, 0, 1, 112.5deg);
}

.main .line:nth-child(6) {
  transform: rotate3d(0, 0, 1, 135deg);
}

.main .line:nth-child(7) {
  transform: rotate3d(0, 0, 1, 157.5deg);
}

.main .line:nth-child(8) {
  transform: rotate3d(0, 0, 1, 180deg);
}

.main .line:nth-child(1):before {
  top: 190px;
}

.main .line:nth-child(2):before {
  top: 165px;
}

.main .line:nth-child(3):before {
  top: 140px;
}

.main .line:nth-child(4):before {
  top: 115px;
}

.main .line:nth-child(5):before {
  top: 90px;
}

.main .line:nth-child(6):before {
  top: 65px;
}

.main .line:nth-child(7):before {
  top: 40px;
}

.main .line:nth-child(8):before {
  top: 15px;
}