Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box black"></div>
<div class="box blue"></div>
<div class="box green"></div>
<div class="box red"></div>
<div class="box purple"></div>
<div class="box teal"></div>

SassMeister-input.scss

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

@function darker($color,$percent: 10){
  @return darken($color, $percent);
}

$black: #5C6166;
$blue: #6ECFF5;
$green: #A1CF64;
$red: #D95C5C;
$purple: #564F8A;
$teal: #00B5AD;

.box{
  background: #F05940;
  height: 40px; width: 40px;
}

.box-2{
  background:darker(#F05940);
}

.box-3{
  background:lighten(#34495e, 10%);
}

.black {
  background-color: $black;
  &:hover{
    background: darker($black);
  }
}
.blue{
  background-color: $blue;
  &:hover{
    background: darker($blue);
  }
}
.green {
  background-color: $green;
    &:hover{
    background: darker($green);
  }
}
.red {
  background-color: $red;
    &:hover{
    background: darker($red);
  }
}
.purple {
  background-color: $purple;
    &:hover{
    background: darker($purple);
  }
}
.teal {
  background-color: $teal;
    &:hover{
    background: darker($teal);
  }
}

SassMeister-output.css

.box {
  background: #F05940;
  height: 40px;
  width: 40px;
}

.box-2 {
  background: #eb3112;
}

.box-3 {
  background: #46627f;
}

.black {
  background-color: #5C6166;
}
.black:hover {
  background: #44474b;
}

.blue {
  background-color: #6ECFF5;
}
.blue:hover {
  background: #3ebff2;
}

.green {
  background-color: #A1CF64;
}
.green:hover {
  background: #89c33d;
}

.red {
  background-color: #D95C5C;
}
.red:hover {
  background: #cf3333;
}

.purple {
  background-color: #564F8A;
}
.purple:hover {
  background: #423c6a;
}

.teal {
  background-color: #00B5AD;
}
.teal:hover {
  background: #00827c;
}

SassMeister-rendered.html

<div class="box black"></div>
<div class="box blue"></div>
<div class="box green"></div>
<div class="box red"></div>
<div class="box purple"></div>
<div class="box teal"></div>