Question

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

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

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

Answer 1

使用rgba instance method

你可以

$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函数亮度（它与不透明度互补），然后Sass函数透明化 - 第二个参数是透明化的结果。
但是，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值的每种颜色编写变量。

SASS：将RGB转换为RGBa

2 个答案: