Sass/Compass - Convert Hex, RGB, or Named Color to RGBA
CssSassCompass SassRgbaCss Problem Overview
This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency:
@include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);
Css Solutions
Solution 1 - Css
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 1
>
> Returns:
> (Color)
Code:
rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
Solution 2 - Css
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)+ ")";
}
Solution 3 - Css
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);
Solution 4 - Css
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 */
Solution 5 - Css
from_hex(hex_string, alpha = nil);
From the documentation:
> Create a new color from a valid CSS hex string. The leading hash is > optional.
Solution 6 - Css
SASS scale-color() will do this in a flexible way: e.g. color: #{scale-color( $primary, $alpha: -50% )};. Full reference here.
Note that if the initial color ($primary in this example) is a solid color (with no transparency), then the $alpha value must be a negative value (up to -100%) to add transparency.