a {
    color: $beautifulHue;
}
@import 'header';
.btn-a {
...

.btn-a {
    background-color: lighten($beautifulHue, 45%);
}

@mixin verticalGradient($fromColor, $toColor) {
    background-color: $toColor;
    background-image: -moz-linear-gradient(top, $fromColor, $toColor);
    ...
    background-image: linear-gradient(to bottom, $fromColor, $toColor);
}
.btn-b {
    @include verticalGradient(blue, red);
}

.btn-b {
    @include verticalGradient(white, $beautifulHue);
}

.btn-b {
    @include verticalGradient(white, lighten($beautifulHue, 30%));
}

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}

.header-title {  
   font-size: 15px;  
   @include for-phone-only {    
      font-size: 18px; 
   }
}

.box {
    width: 100px + 200px;
}

.box {
    width: 500px / 2;
}