Question

我需要检查一种颜色是否包含带有SASS的alpha通道。

我无法使用alpha和opacity函数进行确认：

alpha(rgba(210, 225, 221, 1)); // returns 1
alpha(#d2e1dd); // also returns 1

我想要的是这样的

has-alpha(rgba(210, 225, 221, 1)); // true
has-alpha(#d2e1dd); // false

Answer 1

这是一种幼稚的方法：

@function has-alpha($color) {
   @return if(str-index($color, "rgba"), true, false);
}

has-alpha('rgba(210, 225, 221, 1)') // true
has-alpha('#d2e1dd'); // false

has-alpha函数将仅检查$color是否包含带有rgba的{{1}}，然后返回str-index或true。该函数需要一个字符串参数才能起作用，因此您需要在引号之间发送颜色。

请注意，如果您还想检测何时hex color has alpha channel（例如false），则需要将函数更改为以下内容：

#d2e1ddff

带有alpha通道的十六进制有8位数字，但是@function has-alpha($color) { @if str-index($color, "rgba") { @return true; } @else if str-index($color, "#") and str-length($color) == 9 { @return true; } @else { @return false; } }也在计数str-length，因此条件检查是否由9个字符而不是8个字符组成。

您也可以更简洁的方式编写它：

检查颜色是否包含带有SASS的Alpha通道

1 个答案: