Provide hexadecimal fallback for semi-transparent colors.

RGBa Fallback

// Parameters:
// ```scss
// $color     : semi-transparent color
// $bg-color  : background color. Defaults to white.
// $property  : CSS property for $color. Defaults to background-color.
// $attr      : additional CSS attr for $property. Optional
// ```
// 
// Usage:
// ```scss
// .panel {
//   background: gray;
//   
//   .overlay {
//     @include rgba-fallback(rgba(black, 0.5), $bg-color: gray);
//   }
// }
//
// .panel2 {
//   background: #194c19;
//   
//   .overlay {
//     @include rgba-fallback(rgba(black, 0.7), $bg-color: #194c19, $property: border-color);
//     @include rgba-fallback(rgba(white, 0.8), $bg-color: #194c19, $property: color);
//     @include rgba-fallback(rgba(white, 0.2), $bg-color: #194c19, $property: box-shadow, $attr: 0 3px 0 inset);
//   }
// }
// ```
//
// Adapted from [The Sass Way](http://thesassway.com/intermediate/mixins-for-semi-transparent-colors), [Carlos Ballena](http://codepen.io/cballenar/details/tdznk/), [Eric Fernandez](http://codepen.io/FernE97/details/qcHlr/), and [Matthew Shields](http://matthewshields.co.uk/experiments/provide-fallback-rgba-colours-using-sass-mixin/).
//
// Styleguide 2.2

@mixin rgba-fallback($color, $bg-color: #fff, $property: background-color, $attr: null) {
  // extract alpha component and convert to percentage
  $percent: alpha($color) * 100%;
  // opacify colors
  $opaque: opacify($color, 1);
  $opaque-bg: opacify($bg-color, 1);
  $solid-color: mix($opaque, $opaque-bg, $percent);
  
  @if $attr != null {
    #{$property}: $solid-color #{$attr};
    #{$property}: $color #{$attr};
  } @else {
    #{$property}: $solid-color;
    #{$property}: $color;
  }
}