Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="overlay overlay-pink">
    Test Element
</div>
<div class="overlay overlay-red">
    Test Element
</div>
<div class="overlay overlay-orange">
    Test Element
</div>
<div class="overlay overlay-green">
    Test Element
</div>
<div class="overlay overlay-light-blue">
    Test Element
</div>
<div class="overlay overlay-blue">
    Test Element
</div>
<div class="overlay overlay-purple">
    Test Element
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

@mixin overlayColor($color) {
    background-color: rgba($color, 0.9);
     
    &:hover {
      background-color: rgba($color, 0.3);
    }
}
.overlay {
    margin-bottom: 10px;
    padding: 20px;
    position: relative;
    transition: all .5s ease-in-out;
    
    &.overlay-blue {
      @include overlayColor(rgb(0,123,238));
    }
    &.overlay-orange {
      @include overlayColor(rgb(240,116,7));
    }
    &.overlay-purple {
      @include overlayColor(rgb(126,64,228));
    }
    &.overlay-green {
      @include overlayColor(rgb(57,151,95));
    }
    &.overlay-pink {
      @include overlayColor(rgb(173,33,106));
    }
    &.overlay-light-blue {
      @include overlayColor(rgb(0,183,168));
    }
    &.overlay-red {
      @include overlayColor(rgb(235,50,89));
    }
}

SassMeister-output.css

.overlay {
  margin-bottom: 10px;
  padding: 20px;
  position: relative;
  transition: all .5s ease-in-out;
}
.overlay.overlay-blue {
  background-color: rgba(0, 123, 238, 0.9);
}
.overlay.overlay-blue:hover {
  background-color: rgba(0, 123, 238, 0.3);
}
.overlay.overlay-orange {
  background-color: rgba(240, 116, 7, 0.9);
}
.overlay.overlay-orange:hover {
  background-color: rgba(240, 116, 7, 0.3);
}
.overlay.overlay-purple {
  background-color: rgba(126, 64, 228, 0.9);
}
.overlay.overlay-purple:hover {
  background-color: rgba(126, 64, 228, 0.3);
}
.overlay.overlay-green {
  background-color: rgba(57, 151, 95, 0.9);
}
.overlay.overlay-green:hover {
  background-color: rgba(57, 151, 95, 0.3);
}
.overlay.overlay-pink {
  background-color: rgba(173, 33, 106, 0.9);
}
.overlay.overlay-pink:hover {
  background-color: rgba(173, 33, 106, 0.3);
}
.overlay.overlay-light-blue {
  background-color: rgba(0, 183, 168, 0.9);
}
.overlay.overlay-light-blue:hover {
  background-color: rgba(0, 183, 168, 0.3);
}
.overlay.overlay-red {
  background-color: rgba(235, 50, 89, 0.9);
}
.overlay.overlay-red:hover {
  background-color: rgba(235, 50, 89, 0.3);
}

SassMeister-rendered.html

<div class="overlay overlay-pink">
    Test Element
</div>
<div class="overlay overlay-red">
    Test Element
</div>
<div class="overlay overlay-orange">
    Test Element
</div>
<div class="overlay overlay-green">
    Test Element
</div>
<div class="overlay overlay-light-blue">
    Test Element
</div>
<div class="overlay overlay-blue">
    Test Element
</div>
<div class="overlay overlay-purple">
    Test Element
</div>