Sass/Compass - Convert Hex, RGB, or Named Color to RGBA
I use the rgbapng compass plugin
rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.
Install
gem install compass-rgbapng
Usage
@include rgba-background(rgba(0,0,0,0.75));
Compiles to:
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
There's also ie-hex-str() for IE's ##AARRGGBB format:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
Use the rgba
function built into Sass
Sets the opacity of a color.
Examples:
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)Parameters:
(Color) color
(Number) alpha — A number between 0 and 1Returns:
(Color)
Code:
rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
The rgba function doesn't work on color with no transparency, it returns an hex again. After all, it's not meant to transform hex to rgba, we're just making profit out of hex doesn't allow alpha (yet).
rgba(#fff, 1) // returns #fff
So, I made al little functions that buils the rgb string. I don't need to deal with transparencies for now.
@function toRGB ($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}