Skip to content

Instantly share code, notes, and snippets.

@gangsthub
Last active August 29, 2015 14:21
Show Gist options
  • Save gangsthub/0bc105e97c4b7f8130c8 to your computer and use it in GitHub Desktop.
Save gangsthub/0bc105e97c4b7f8130c8 to your computer and use it in GitHub Desktop.
Two versions: with and without `!important`
// Inspired in:
// https://css-tricks.com/snippets/css/cross-browser-opacity/
// http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
// Usage: `@include hardOpacity(1);`, `@include hardOpacity(.5);`
@mixin hardOpacity($valueOpacity) {
$unitOp: unit($valueOpacity);
$valOp: parseInt($valueOpacity);
$opacity-ie: $valOp * 100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie})"; // IE 8
filter: alpha(opacity=$opacity-ie); //IE 5-7
-moz-opacity: $valOp; // Netscape (not a joke...)
-khtml-opacity: $valOp; // Safari 1.x
opacity: $valOp; // Good browsers
}
// Usage: `@include hardOpacity-imp(1,true);`, Will give `!important`
// `@include hardOpacity(.5, false);` Will not give `!important`
@mixin hardOpacity-imp($valueOpacity, $imp) {
$imp: false !default;
$unitOp: unit($valueOpacity);
$valOp: parseInt($valueOpacity);
$opacity-ie: $valOp * 100;
@if $imp {
//@debug "$boolean is #{$imp}";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie})" !important; // IE 8
filter: alpha(opacity=$opacity-ie) !important; //IE 5-7
-moz-opacity: $valOp !important; // Netscape (not a joke)
-khtml-opacity: $valOp !important; // Safari 1.x
opacity: $valOp !important; // Good browsers
}
@else {
//@debug "$boolean is #{$imp}";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie})"; // IE 8
filter: alpha(opacity=$opacity-ie); //IE 5-7
-moz-opacity: $valOp; // Netscape (not a joke)
-khtml-opacity: $valOp; // Safari 1.x
opacity: $valOp; // Good browsers
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment