Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="bike">
  <div class="wheel wheel--front">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
  <div class="wheel wheel--back">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
</div>

SassMeister-input.scss

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

$color: #666;
$size: 300px;

.bike {
 position: relative;
 width: $size;
 height: $size;
 border: 1px dashed $color;
}

.wheel {
 border-radius: 50%;
 border: 1px solid $color;
 height: $size / 3;
 width: $size / 3;
 position: absolute;
}

.wheel--front {
  bottom: 0;
  left: 0;
}

.wheel--back {
  bottom: 0;
  right: 0;
}

.spoke {
  width: 100%;
  position: absolute;
  top: 50%;
  border-bottom: 1px solid lighten($color, 40%);
}

.spoke--1 {
  transform: rotate(36deg);
}
.spoke--2 {
  transform: rotate(72deg);
}
.spoke--3 {
  transform: rotate(108deg);
}
.spoke--4 {
  transform: rotate(144deg);
}

SassMeister-output.css

.bike {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px dashed #666;
}

.wheel {
  border-radius: 50%;
  border: 1px solid #666;
  height: 100px;
  width: 100px;
  position: absolute;
}

.wheel--front {
  bottom: 0;
  left: 0;
}

.wheel--back {
  bottom: 0;
  right: 0;
}

.spoke {
  width: 100%;
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #cccccc;
}

.spoke--1 {
  transform: rotate(36deg);
}

.spoke--2 {
  transform: rotate(72deg);
}

.spoke--3 {
  transform: rotate(108deg);
}

.spoke--4 {
  transform: rotate(144deg);
}

SassMeister-rendered.html

<div class="bike">
  <div class="wheel wheel--front">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
  <div class="wheel wheel--back">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
</div>