example.css.scss

// Every style that will be repeated more than once should be written as a mixin

btn-states($btnColor) {
  background-color: $btnColor;

  &:hover {
    background-color: darken($btnColor, 15%);
  }

  &:active {
    background-color: darken($btnColor, 20%);
  }
}

button($behavior = submit ) {
  border-radius: $radius; // Every value that will be repeated should be written as a variable
  -webkit-font-smoothing: auto;
  border: 0;
  font-weight: 400;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 15px;
  color: #fff;

  if $behavior == submit {   // Any new button type should be defined as one of these behavior arguments for button()
    btn-states($secondary_color);
  }

  else if $behavior == back {
    btn-states($btnGray);
  }

  else if $behavior == facebook {
    btn-states($fbBlue);
    display: block;
    height: 49px;
    background-color: $facebook_blue;
    border-radius: 4px;
    color: #fff;
    margin: $buffer auto;
    padding: 1.1em 1em 1em 3em;
    background-image: url("<%= image_path 'icons/facebook_F.png' %>");
    background-repeat: no-repeat;
    background-position: 0.6em;
    width: 16em;
  }

  else if $behavior == disabled {
    background-color: $btnGray;
    pointer-events: none;
    cursor: auto;
    opacity: 0.5;
  }
}

.buttonWrapper {
  .saveBtn {  // Give every button class names that reflect their function
    button($behavior: submit);  // Call the button mixin and pass in the appropriate behavior argument
  }

  .skipBtn {
    button($behavior: back);
  }
}