Можно ли использовать css-переменные с rgba, или как сделать альфа-канал?

Доброго вечера.
В общем, у меня встал вопрос. В проекте используется scss, но нет scss-переменных, вместо этого там, как и подобает любителям смузи, живут на передовой и используют только css-переменные. Дизайн-системе, надо заметить, отдают дань уважения и все цвета полностью покрываются предопределенными 18ю переменными.

Однако сейчас появилась необходимость задать фон с прозрачностью. Как это сделать? Способ ниже не работает, т.к. функция rgba() внутри scss не работает с css-переменными (ибо они рантайм, а scss компилируется), а rgba в браузере не работает с hex.
--ui-color-grey-2: #d5d9e0;
.selector {
    background-color: rgba(var(--ui-color-grey-2), .25);
}

Самое лучшее решение из очевидных тут - это продублировать переменные sass-переменными, но боюсь, оно не пройдет. Посему реквестирую ультрасовременные способы добиться rgba с css-переменной, содержайщей цвет в hex-формате.
  • Вопрос задан
  • 712 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
С помощью только CSS — никак в таком виде. CSS не умеет трансформировать форматы цветов. Очевидно, что внутри RGBA должен быть цвет в формате RGB.

Поэтому только так:



Если через SASS, то можно конвертировать HEX в RGB с его помощью а-ля так (лучше отдельную функцию использовать)

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы