Sass mixin for background transparency back to IE8

Question

I'm new to Sass and struggling with this. I can't get the color to render in both hex (for IE) and rgba. Every little piece is frustrating me because I haven't mastered the syntax yet, and Google results for Sass are still sparse.

Here's the mixin:

@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});
}

Such that @include transparent(#FFF,.4) should produce the nice, browser compatible transparent code below:

background: transparent;         
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40FFFFFF,endColorstr=#40FFFFFF);
zoom: 1;
background-color: rgba(100,100,100,.40);

I've been noobing on the following for a couple hours:

• The # required for #RGB format.
• The . required for rgba alpha.

Both need to be included for the call to rgba(), however the # can't be included for the IE #AARRGGBB or it will look like #AA#RRGGBB, and the . can't be included for IE or it rejects #.AARRGGBB.

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?

Answer 1

@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

NOTE: The ie-hex-str is only available in recent versions, not sure when it was introduced though

Answer 2

This probably is as bulletproof as you'll get without a proper shim.

To build on seutje's answer, this lets you use ms-filter transparency if you're doing background-color on IE, but if you if you know the colour of the element behind the element you want to make transparent, you can use Sass's "mix" function to mix the two colours and get fake transparency - for any kind of colour. That means borders and text and all that jive. It's still a manual fallback but it'll give you the exact colour you're trying to simulate with a solid hex.

SCSS:

@mixin alpha-color($foreground-color, $property: 'background-color', $background-context-color: #fff) {
    #{$property}: mix( 
        fade-in($foreground-color, 1), 
        $background-context-color, 
        percentage(opacity($foreground-color)) 
    ); // Browsers without color opacity
    #{$property}: $foreground-color; // Decent browsers
    @if $property == 'background-color' {
        .lt-ie9 & { // IE8 has background filters; use them instead
            #{$property}: transparent;
            $ie-hex: ie-hex-str($foreground-color);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex},endColorstr=#{$ie-hex});
            zoom: 1;
        }
    }
}

To get border-color: rgba(255, 0, 0, 0.5) on a blue background, you'd use it like:

.blue-container {
    $color-bg: rgb(0,0,255);
    background-color: $color-bg;
    .transparent-red-element {
        @include alpha-color(rgba(255, 0, 0, .65), border-color, $color-bg);
    }
}

Sass automatically turns 100% opacity colors back into a hex code, hence the fade-in of 100%.

The only browsers without colour opacity are IE8 <=8 and Opera <=9.6, and IE 8 has filters so this only helps for colors other than background-color. The principle is that you mix the background and foreground colours together into a flat hex.

ie-hex-str is like a year old now so you'll definitely have it.

Answer 3

I think I encountered a similar problem when I wanted to pass a url to the mixin. Instead of sending only the url I had the send the whole url parameter as a parameter to the mixin. If you understand what I mean?

example:

@mixin bg($url)
  background: #000 $url repeat-x

insted of:

@mixin bg($url)
  background: #000 url($url) repeat-x

Also, this might not the suited for your application, but I usually work around that problem using opacity:

@mixin transparent_bg($hex, $a){
  /* for IEGR8 */
  filter:alpha(opacity=$a)
  zoom: 1;

  /* for modern browsers */
  background-color: $hex;
  opacity: ($a*10)
}