Generated by SassMeister.com.

SassMeister-input-HTML.html

<button>
  Button
</button>

<button class="blue">
  Button Blue
</button>

<button class="white background-blue">
  Button
</button>

<button disabled>
  Disabled
</button>

<button class="red background-grey">
  Button
</button>

<button class="border-red blue background-grey">
  Border Red
</button>

<button>
  <span class="button-symbol">
    #
  </span>
  Button
</button>

<button>
  <span class="button-symbol">
    #
  </span>
  Button
</button>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$black: #000000;
$white: #ffffff;
$blue: #0000ff;
$red: #ff0000;
$grey: #cfcfcf;
$darkGrey: #9B9B9B;

$colors: (
    "black": $black,
    "white": $white,
    "blue": $blue,
    "red": $red,
    "grey": $grey,
    "darkgrey": $darkGrey,
);

@each $name, $color in $colors {
    .#{$name} {
        color: $color;
    }

    .background-#{$name} {
        background-color: $color;
    }
    
    .border-#{$name} {
        border-color: $color;
    }
}

/* Button Style */
button {
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  background: inherit;
  color: inherit;
  border-radius: 3px;
  padding: 0 5px;
  line-height: 20px;
  
  &:disabled {
    color: $grey;
  }
}

.button {
  @extend button;
  
  &-symbol {
    display: inline-block;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: inherit;
    line-height: 20px;
    padding-right: 5px;
  }
}

SassMeister-output.css

.black {
  color: #000000;
}

.background-black {
  background-color: #000000;
}

.border-black {
  border-color: #000000;
}

.white {
  color: #ffffff;
}

.background-white {
  background-color: #ffffff;
}

.border-white {
  border-color: #ffffff;
}

.blue {
  color: #0000ff;
}

.background-blue {
  background-color: #0000ff;
}

.border-blue {
  border-color: #0000ff;
}

.red {
  color: #ff0000;
}

.background-red {
  background-color: #ff0000;
}

.border-red {
  border-color: #ff0000;
}

.grey {
  color: #cfcfcf;
}

.background-grey {
  background-color: #cfcfcf;
}

.border-grey {
  border-color: #cfcfcf;
}

.darkgrey {
  color: #9B9B9B;
}

.background-darkgrey {
  background-color: #9B9B9B;
}

.border-darkgrey {
  border-color: #9B9B9B;
}

/* Button Style */
button, .button {
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  background: inherit;
  color: inherit;
  border-radius: 3px;
  padding: 0 5px;
  line-height: 20px;
}

button:disabled, .button:disabled {
  color: #cfcfcf;
}

.button-symbol {
  display: inline-block;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: inherit;
  line-height: 20px;
  padding-right: 5px;
}

SassMeister-rendered.html

<button>
  Button
</button>

<button class="blue">
  Button Blue
</button>

<button class="white background-blue">
  Button
</button>

<button disabled>
  Disabled
</button>

<button class="red background-grey">
  Button
</button>

<button class="border-red blue background-grey">
  Border Red
</button>

<button>
  <span class="button-symbol">
    #
  </span>
  Button
</button>

<button>
  <span class="button-symbol">
    #
  </span>
  Button
</button>