Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="green">Home</div>

<div class="gray"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

$green: #1eb478;
$green-dark: darken($green, 4);

$gray: #6a737b;
$gray-dark: darken($gray, 4);

div {
  width: 12em;
  height: 3em;
  transition: background-color 50ms ease-in-out;
  color: white;
  text-align: center;
  line-height: 3em;
  text-transform: uppercase;
  font-family: "bentonsans";
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .03em
}

.green {
  background-color: $green;
  &:active {
    background-color: $green-dark;
  }
}

.gray {
  background-color: $gray;
  &:active {
    background-color: $gray-dark;
  }
}

SassMeister-output.css

div {
  width: 12em;
  height: 3em;
  transition: background-color 50ms ease-in-out;
  color: white;
  text-align: center;
  line-height: 3em;
  text-transform: uppercase;
  font-family: "bentonsans";
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.03em;
}

.green {
  background-color: #1eb478;
}
.green:active {
  background-color: #1ba36c;
}

.gray {
  background-color: #6a737b;
}
.gray:active {
  background-color: #616970;
}

SassMeister-rendered.html

<div class="green">Home</div>

<div class="gray"></div>