title: Sass mixin for background transparency back to IE8
body: <p>I'm new to Sass and struggling with this.  I can't get the color to render in both <code>hex</code> (for IE) and <code>rgba</code>.  Every little piece is frustrating me because I haven't mastered the syntax yet, and Google results for Sass are still sparse.  </p>
  
  <p>Here's the mixin:</p>
  
  <pre class="lang-css prettyprint-override"><code>@mixin transparent($hex, $a){
      /* for IEGR8 */
      background: transparent;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$a}#{$hex},endColorstr=#{$a}#{$hex});
      zoom: 1;
      /* for modern browsers */
      background-color: rgba(#{$hex},.#{$a});
  }
  </code></pre>
  
  <p>Such that <code>@include transparent(#FFF,.4)</code> should produce the nice, browser compatible transparent code below:</p>
  
  <pre class="lang-css prettyprint-override"><code>background: transparent;         
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40FFFFFF,endColorstr=#40FFFFFF);
  zoom: 1;
  background-color: rgba(100,100,100,.40);
  </code></pre>
  
  <p>I've been noobing on the following for a couple hours:</p>
  
  <ul>
  <li>The <code>#</code> required for #RGB format.  </li>
  <li>The <code>.</code> required for rgba alpha.</li>
  </ul>
  
  <p>Both need to be included for the call to <code>rgba()</code>, however the # can't be included for the IE <code>#AARRGGBB</code> or it will look like <code>#AA#RRGGBB</code>, and the . can't be included for IE or it rejects <code>#.AARRGGBB</code>.</p>
  
  <p>Am I missing a much simpler way to do this?  Can this be done with Sass string manipulation or any slightly clever color cast function in Sass which handles this for me already?</p>