csssassbackground-colormixinsrgba

Converting Hex to RGBa for background opacity


I have the following Sass mixin, which is a half complete modification of an RGBa example:

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

I have applied $opacity ok, but now I am a stuck with the $color part. The colors I will be sending into the mixin will be HEX not RGB.

My example use will be:

element {
    @include background-opacity(#333, .5);
}

How can I use HEX values within this mixin?


Solution

  • The rgba() function can accept a single hex color as well decimal RGB values. For example, this would work just fine:

    @mixin background-opacity($color, $opacity: 0.3) {
        background: $color; /* The Fallback */
        background: rgba($color, $opacity);
    }
    
    element {
         @include background-opacity(#333, 0.5);
    }
    

    If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue() functions to do so:

    $red: red($color);
    $green: green($color);
    $blue: blue($color);
    
    background: rgb($red, $green, $blue); /* same as using "background: $color" */