Created
April 18, 2011 05:44
-
-
Save stephanschubert/924869 to your computer and use it in GitHub Desktop.
SCSS mixin for cross-browser background-color: rgba(...). You'll need the Ruby extension for convenient color conversion rgba->hex (IE uses ARGB)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin background-rgba($r,$g,$b,$a) { | |
// To mimic this in Internet Explorer, you can use the proprietary filter | |
// property to create a gradient with the same start and end color, along | |
// with an alpha transparency value. | |
@if experimental-support-for-microsoft { | |
$color: ie_hex($r,$g,$b,$a); | |
$value: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=##{$color},endColorstr=##{$color})"); | |
background-color: transparent\9; | |
-ms-filter: $value; | |
filter: $value; | |
zoom: 1; | |
} | |
// Good browsers. | |
@include experimental(background-color, rgba($r,$g,$b,$a), | |
-moz, | |
-webkit, | |
-o, | |
not -ms, | |
-khtml, | |
official | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Stolen from chriseppstein/compass ;) | |
// Support for mozilla in experimental css3 properties. | |
$experimental-support-for-mozilla : true !default; | |
// Support for webkit in experimental css3 properties. | |
$experimental-support-for-webkit : true !default; | |
// Support for opera in experimental css3 properties. | |
$experimental-support-for-opera : true !default; | |
// Support for microsoft in experimental css3 properties. | |
$experimental-support-for-microsoft : true !default; | |
// Support for khtml in experimental css3 properties. | |
$experimental-support-for-khtml : true !default; | |
// This mixin provides basic support for CSS3 properties and | |
// their corresponding experimental CSS2 properties when | |
// the implementations are identical except for the property | |
// prefix. | |
@mixin experimental($property, $value, | |
$moz : $experimental-support-for-mozilla, | |
$webkit : $experimental-support-for-webkit, | |
$o : $experimental-support-for-opera, | |
$ms : $experimental-support-for-microsoft, | |
$khtml : $experimental-support-for-khtml, | |
$official : true | |
) { | |
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; } | |
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; } | |
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; } | |
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; } | |
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; } | |
@if $official { #{$property} : $value; } | |
} | |
// Same as experimental(), but for cases when the property is the same and the value is vendorized | |
@mixin experimental-value($property, $value, | |
$moz : $experimental-support-for-mozilla, | |
$webkit : $experimental-support-for-webkit, | |
$o : $experimental-support-for-opera, | |
$ms : $experimental-support-for-microsoft, | |
$khtml : $experimental-support-for-khtml, | |
$official : true | |
) { | |
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; } | |
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; } | |
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; } | |
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; } | |
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; } | |
@if $official { #{$property} : #{$value}; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module IeHex | |
def ie_hex(r,g,b,a) | |
assert_type r, :Number | |
assert_type g, :Number | |
assert_type b, :Number | |
assert_type a, :Number | |
unless (0..1).include?(a.value) | |
raise ArgumentError.new("Alpha channel #{a.value} must be between 0 and 1") | |
end | |
r = r.value.to_s(16).rjust(2, '0') | |
g = g.value.to_s(16).rjust(2, '0') | |
b = b.value.to_s(16).rjust(2, '0') | |
a = (a.value * 255).to_i.to_s(16).rjust(2, '0') | |
Sass::Script::String.new(a + r + g + b) | |
end | |
end | |
Sass::Script::Functions.send :include, IeHex |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment