Actually, the rgba
in Stylus works just like that, 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)
Would actually compile to
.my-class {
background: rgba(18,52,86,0.5);
foreground: rgba(171,205,239,0.5);
}
This means you can just go and do things like rgba(black, 0.5)
, rgba(#FFF, 0.5)
and use variables inside of it, just like in your case.