SASS：将RGB转换为RGBa

Question

我已经按照以下方式设置了我的项目颜色：

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

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

- Steph

Answer 1

使用rgba实例方法

你可以

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

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

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

- MikeM

---

请将测试链接更新为：https://sass-lang.com/playground/ - undefined

Answer 2

也许更好的解决方案是创建自己的函数，每当需要时调用它。 Sass 的作者 Hampton Catlin 提出了一个不错的解决方案，基本上是这样的：

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

因此，实质上，您首先使用Sass函数lightness（与不透明度相反），然后使用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);  

希望这有所帮助。虽然看起来很麻烦，但如果将此函数放入部分 _functions 中，则始终有所帮助。否则，您将不得不为每个需要 alpha 值的颜色编写一个变量。

- Zed Pi