mca5xw
Last Updated: February 25, 2016
·
10.54K
· shavit
Ac5c8c4c9580e06cb7dfef8405cbce34

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

img.preload{
    @include Opacity(0);

    &.complete{
        @include Opacity(1);
    }
}

http://conpanna.net

Say Thanks
Respond

3 Responses
Add your response

14706
Myphoto 180x180

Well done, thank you

over 1 year ago ·
14765
Fkxuli4e normal

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 ·
15290
4a551074ddba4460f95d011c47190d0e

Thanks!

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 ·