Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="dragon"></div>
<div class="bill"></div>
<div class="knight">
  <div class="lightsaber"></div>
</div>

SassMeister-input.scss

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

$dragon: #7F00ff;
$human: #ffa07a;
$knight: #ccc;
$lightsaber: #0f0;
$lightsaber-charged: #ff0;

@mixin size($w: 20px, $h: 40px) {
  height: $h;
  width: $w;
}

@mixin queue($queue: true) {
  @if $queue {
    display: inline-block;
  } @else {
    display: block;
  }
}

%small {
  @include size(5px, 20px);
}

%normal {
  @include size;
}

%huge {
  @include size(160px, 80px);
}

%human {
  @extend %normal;
  @include queue;
  background-color: $human;
  position: relative;
}

.dragon {
  @extend %huge;
  @include queue;
  background-color: $dragon;
}

.lightsaber {
  @extend %small;
  background-color: $lightsaber;
  display: inline-block;
  position: absolute;
}

.bill {
  @extend %human;
}

.knight {
  @extend %human;
  @include queue(false);
  background-color: $knight;
  &:hover {
    .lightsaber {
      background-color: $lightsaber-charged;  
    }
  }
}

SassMeister-output.css

.lightsaber {
  height: 20px;
  width: 5px;
}

.bill, .knight {
  height: 40px;
  width: 20px;
}

.dragon {
  height: 80px;
  width: 160px;
}

.bill, .knight {
  display: inline-block;
  background-color: #ffa07a;
  position: relative;
}

.dragon {
  display: inline-block;
  background-color: #7F00ff;
}

.lightsaber {
  background-color: #0f0;
  display: inline-block;
  position: absolute;
}

.knight {
  display: block;
  background-color: #ccc;
}
.knight:hover .lightsaber {
  background-color: #ff0;
}

SassMeister-rendered.html

<div class="dragon"></div>
<div class="bill"></div>
<div class="knight">
  <div class="lightsaber"></div>
</div>