Supporting Alpha Channels in old versions of IE without CSS bloat

alpha-channel.scss

/**
 * The goal here is to simplify implementing alpha channels when requiring support of 
 * old versions of IE that do not support rgba values. For modern browsers, it'll only output
 * the rgba value of a color, but for <IE9, it'll first output the solid version of the color
 * with no opacity.
 */



/**
 * Mixin to conditionally show content if the stylesheet is for old versions of IE. You'd have a
 * separate IE8-only stylesheet that gets loaded conditionally.
 * Following this pattern: http://jakearchibald.github.io/sass-ie/
 */
@mixin old-ie {
   @if $old-ie {
       @content;
   }
}



/**
 * Mixin that takes a property, color, and opacity value
 * For modern browsers, it'll only output the rgba value, but for the IE8.css file,
 * it'll load the zero opacity color first, which IE8 will use.
 */
@mixin alpha-element($property, $color, $opacity) {
  @include old-ie {
    #{$property}: $color;
  }
  #{$element}: rgba($color, $opacity);
}



/**
 * Actually implementing
 */
.element {
    @include alpha-element("background-color", #000, 0.5);
}