Проверьте, содержит ли цвет альфа-канал с помощью SASS

Question

Мне нужно проверить, содержит ли цвет альфа-канал с помощью SASS.

Я не могу проверить это с помощью функций 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 с str-index, а затем вернет true или false. Для работы функции требуется строковый параметр, поэтому вам нужно отправлять цвета между кавычками.

Обратите внимание, что если вы также хотите определить, имеет ли шестнадцатеричный цвет альфа-канал (например, #d2e1ddff), вам нужно изменить функцию на что-то вроде:

@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;
  }
}

Шестнадцатеричный с альфа-каналом имеет 8 цифр, но здесь str-length также считает #, поэтому условие проверяет наличие 9 символов вместо 8.

Вы также можете написать это в более сжатой форме:

@function has-alpha($color) {
  $hasAlpha: str-index($color, "rgba") or (str-index($color, "#") and str-length($color) == 9);
  @return if($hasAlpha, true, false);
}