Sass-将十六进制转换为RGBa以实现背景不透明度

我有以下Sass mixin,它是RGBa示例的一半完整修改

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

我已经申请了$opacity确定,但现在我对这个$color零件感到困惑我将发送到mixin的颜色将是十六进制而不是RGB。

我的示例用法是:

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

如何在此混合中使用十六进制值?

猪猪前端2020/03/17 17:12:22

有一个内置的mixin: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

数量应在0到1之间;

Sass官方文档(模块:Sass :: Script :: Functions)

凯阿飞2020/03/17 17:12:22

SASS具有内置的rgba()函数来评估值。

rgba($color, $alpha)

例如

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

使用您自己的变量的示例:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

输出:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}
村村GO2020/03/17 17:12:22

RGBA()函数可以接受单个十六进制颜色以及小数RGB值。例如,这可以正常工作:

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

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

但是,如果需要将十六进制颜色分解为RGB分量,则可以使用red()green()blue()函数来实现:

$red: red($color);
$green: green($color);
$blue: blue($color);

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