Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save stephanschubert/924869 to your computer and use it in GitHub Desktop.
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)
@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
);
}
// 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}; }
}
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