SASS：将 RGB 转换为 RGBa答案

【问题标题】：SASS: converting RGB to RGBaSASS：将 RGB 转换为 RGBa
【发布时间】：2018-06-01 16:05:51
【问题描述】：

我已经像这样设置了我的项目的颜色：

$blue: rgb(75, 179, 209);

有没有办法使用这个变量并根据需要将值转换为其他地方的 RGBa？

【问题讨论】：

标签： css sass

【解决方案1】：

使用rgba instance method

你可以

$blue: rgb(75, 179, 209);

body {
    background:rgba($blue, .5);
}

可以在这里测试：http://sass-lang.com/try.html

【讨论】：

【解决方案2】：

也许更好的解决方案是创建您自己的函数，您可以在需要时调用它。 Hampton Catlin（Sass 的作者）提出了一个很好的解决方案，基本上是这样的：

@function set-opacity ($color) {
    $lightness: lightness($color);
    $trans-value: transparentize($color, $lightness);
        @return $trans-value;
    }

因此，本质上，您首先使用 Sass 函数 lightness（与 opacity 互补），然后使用 Sass 函数 transparentize - 第二个参数是 transparentize 的结果。
然而，Catlin 表明这需要改进 - 因为 ligthness() 会产生百分比，但我们需要介于 0 和 1 之间的值。
因此，我们需要一个将百分比转换为所需值的附加函数。这是一个简单的函数，因为我们只是将百分比除以 100。

@function percent-to-number ($val) {
    @return $val / 100;
    }

现在，我们准备好了 - 整个代码块如下所示：

    @function percent-to-number ($val) {
        @return $val / 100;
    }

    @function set-opacity ($color) {
        $lightness: lightness($color);
        $lightness-number: percent-to-number($lightness);
        $trans-value: transparentize($color, $lightness-number);
            @return $trans-value;
    }

例如，

color: set-opacity(#f00);

给出这个 CSS 输出：

color: rgba(255, 0, 0, 0.5);

希望这会有所帮助。看起来工作量太大了，但是如果你把这个函数放在 partials _functions 中，总会有帮助的。否则，你最终会为你想要 alpha 值的每种颜色编写一个变量。

【讨论】：