image-less RGBA backgrounds for real browsers and Internet Explorer

  • Download Gist
cross-browser-rgba-mixin.scss
SCSS
1 2 3 4 5 6 7
@mixin rgba-background($color, $opacity) {
background-color: $color;
background-color: rgba($color, $opacity);
background-color: transparent\9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{'#'+hex(round($opacity*255)) + '' + hex(red($color)) + '' + hex(green($color)) + '' + hex(blue($color))},endColorstr=#{'#'+hex(round($opacity*255)) + '' + hex(red($color)) + '' + hex(green($color)) + '' + hex(blue($color))});
zoom: 1;
}
sass-hex.rb
Ruby
1 2 3 4 5 6 7 8 9 10 11
module Sass::Script::Functions
module SassHex
def hex(decimal)
Sass::Script::String.new("%02x" % decimal)
end
end
include SassHex
end
 
# All you should have todo is require the sass-hex.rb file
# I use this trick a lot in compass when extending sass

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.