在Stylus中将HEX转换为RGBA

Question

我在Stylus中有一些类似于以下

的HEX颜色值

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

并希望在rgba值中使用它们来实现不透明度，以便

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

或替代语法被编译为CSS

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

使用Stylus或Stylus插件（如笔尖）在rgba中使用HEX颜色值是否有快速简便的方法？

Answer 1

实际上，Stylus中的rgba就是这样，你试过你写过的吗？在Stylus中

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

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

实际上会编译为

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

这意味着你可以去做rgba(black, 0.5)，rgba(#FFF, 0.5)之类的事情并在其中使用变量，就像你的情况一样。

Answer 2

最后，我自己完成了这项工作：

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