Convert HEX to RGBA in Stylus

Question

I have some HEX color values ​​in Stylus, similar to the following

$my-background ?= #123456 $my-foreground ?= #ABCDEF 

and would like to use them in rgba values ​​for opacity, so

 .my-class background rgba($my-background, .5) foreground rgba($my-foreground, .5) 

or alternative syntax compiles in CSS as

 .my-class { background rgba(18, 52, 86, .5); foreground rgba(171, 205, 239, .5); } 

Is there a quick and easy way to use HEX color values ​​in rgba using Stylus or a Stylus plugin (like nib)?

Answer 1

Actually, rgba in Stylus works the same way, have you tried what you wrote? In Stylus

 $my-background ?= #123456 $my-foreground ?= #ABCDEF .my-class background rgba($my-background, .5) foreground rgba($my-foreground, .5) 

Actually compiles

 .my-class { background: rgba(18,52,86,0.5); foreground: rgba(171,205,239,0.5); } 

This means that you can just do and do things like rgba(black, 0.5) , rgba(#FFF, 0.5) and use the variables inside it, as in your case.

Answer 2

In the end, I made my own function:

 hextorgba(color, alpha = 1) 'rgba(' + red(color) + ', ' + green(color) + ', ' + blue(color) + ', ' + alpha + ')'