Opacity with Sass

Supplemental 214 views
+1
0 Flares 0 Flares ×

It is OK to use opacity property for modern browsers but not for IE. So provide a filter fallback for IE8. You can set opacity from 0 (not visible) to 1 (completely visible) and filter percentage from 0 to 100. It means you can simply multiply the value of opacity by 100 for IE filter.

Define @mixin

@mixin opacity($opacity) {
     opacity: $opacity;
     $opacityIE: $opacity * 100;
     filter: alpha(opacity=$opacityIE);
}

Usage with @include

.box {
     @include opacity(0.5);
}

Output

.box {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
Provided by: Web Creator Box
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×