css - SASS：将 RGB 转换为 RGBa

Question

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

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

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

Answer 1

使用rgba 实例方法

你可以

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

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

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

Answer 2

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

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

因此，本质上，您首先使用 Sass 函数 lightness（与 opacity 互补），然后使用 Sass 函数 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 值的每种颜色编写一个变量。