Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

css sass compass-sass rgba
Pat Newell picture Pat Newell · Feb 14, 2012 · Viewed 57.6k times · Source

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);

Answer

maxbeatty picture maxbeatty · Feb 14, 2012

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);

Related questions

SASS :not selector

I have a :not css selector in SASS mixin but it doesn't do anything: Code Snippet: @mixin dropdown-pos($pos:right) { &:not(.notip) { @if $comp-tip == true{ @if $pos == right { top:$dropdown-width * -0.6; @include tip($pos:$pos); } } } &.notip { @if $pos == …

Read More
Sass Background Image mixin

I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do …

Read More
Can I calculate and use element height with SASS \ Compass

I use sass and compass in my RoR project. I need to assign to the top CSS property of an element the value, which is element height divide by -2. Can I do it with SASS \ Compass?

Read More