Sass - 将 Hex 转换为 RGBa 以获得背景不透明度

Question

我有以下 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 的颜色将是 HEX 而不是 RGB。

我的示例使用将是：

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

如何在这个 mixin 中使用 HEX 值？

原文由 Rick Donohoe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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" */

原文由 hopper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

数量应在 0 到 1 之间；

Sass 官方文档（模块：Sass::Script::Functions）

原文由 user3631047 发布，翻译遵循 CC BY-SA 3.0 许可协议