Last Updated: February 25, 2016
· shavit

SASS Opacity Mixin

CSS Opacity SASS MIxin For IE, FireFox, Chrome and Safari

@mixin Opacity($value){
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);

How To Use

    @include Opacity(0);

        @include Opacity(1);

3 Responses
Add your response

Well done, thank you

over 1 year ago ·

Good job on this. I was making my own but was thinking i'd better check up on some other alternatives.

over 1 year ago ·


I changed the casing to fit our conventions, maybe suits someone else:

@mixin opacity($value){
  $ie-value: $value * 100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ie-value+")";
  filter: alpha(opacity=$ie-value);
over 1 year ago ·