Refactor Colors

Button-theme-color.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

$color-primary: #006dcc;
$color-success: #5bb75b;
$color-danger: #da4f49;
$color-white: white;

@mixin Button-theme($color, $offset: 10) {
  $colorDarker: darken(desaturate($color, $offset), $offset);

  background-color: $color;
  background-image: linear-gradient(top, $color 0%, $colorDarker 100%);
  border: 1px solid $colorDarker;
  text-shadow: darken($colorDarker, $offset * 2) 0 -1px 1px;

  &:hover,
  &:focus {
    background: $colorDarker;
    text-decoration: none;
  }
}

%Button {
  border-radius: 5px;
  box-shadow: inset 0 0 1px $color-white, 0 1px 2px rgba(0, 0, 0, .3);
  color: $color-white;
  cursor: pointer;
  display: inline-block;
  height: scut-em(40, 16);
  text-align: center;
  text-decoration: none;  
  font-family: 'Open Sans', sans-serif; 
  font-weight: 700;
  line-height: 40px;
  padding: 0 15px;
  
  @include Button-theme($color-primary);
}

.Button {
  @extend %Button;
}

.Button--success {
  @extend %Button;

  @include Button-theme($color-success);
}

.Button--danger {
  @extend %Button;

  @include Button-theme($color-danger);
}

Button-theme-colors.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

@mixin Button-theme($colorBase, $colorBorder, $colorShadow) {
  background-color: $colorBase;
  background-image: linear-gradient(top, $colorBase 0%, $colorBorder 100%);
  border: 1px solid $colorBorder;
  text-shadow: $colorShadow 0 -1px 1px;

  &:hover,
  &:focus {
    background: $colorBorder;
    text-decoration: none;
  }
}

%Button {
  border-radius: 5px;
  box-shadow: inset 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: scut-em(40, 16);
  text-align: center;
  text-decoration: none;  
  font-family: 'Open Sans', sans-serif; 
  font-weight: 700;
  line-height: 40px;
  padding: 0 15px;

  @include Button-theme(#006dcc, #085191, #031b30);
}

.Button {
  @extend %Button;
}

.Button--success {
  @extend %Button;

  @include Button-theme(#5bb75b, #4f904f, #2b4e2b);
}

.Button--danger {
  @extend %Button;

  @include Button-theme(#da4f49, #bb3a35, #BB3A35);
}

repetitive-colors.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

%Button {
  border-radius: 5px;
  box-shadow: inset 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: scut-em(40, 16);
  text-align: center;
  text-decoration: none;  
  font-family: 'Open Sans', sans-serif; 
  font-weight: 700;
  line-height: 40px;
  padding: 0 15px;
  
  background-color: #006dcc;
  background-image: linear-gradient(top, #006dcc 0%, #085191 100%);
  border: 1px solid #085191;
  text-shadow: #031b30 0 -1px 1px;
  
  &:hover,
  &:focus {
    background: #006dcc;
    text-decoration: none;
  }
}

.Button {
  @extend %Button;
}

.Button--success {
  @extend %Button;

  background-color: #5bb75b;
  background-image: linear-gradient(top, #5bb75b 0%, #4f904f 100%);
  border: 1px solid #4f904f;
  text-shadow: #2b4e2b 0 -1px 1px;

  &:hover,
  &:focus {
    background: #5bb75b;
    text-decoration: none;
  }
}

.Button--danger {
  @extend %Button;

  background-color: #da4f49;
  background-image: linear-gradient(top, #da4f49 0%, #bb3a35 100%);
  border: 1px solid #bb3a35;
  text-shadow: #6c211e 0 -1px 1px;

  &:hover,
  &:focus {
    background: #BB3A35;
    text-decoration: none;
  }
}