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

Question

[Алексей Николаев]

Доброго вечера.
В общем, у меня встал вопрос. В проекте используется 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-формате.

Answer 1

[Rustam Bainazarov]

С помощью только CSS — никак в таком виде. CSS не умеет трансформировать форматы цветов. Очевидно, что внутри RGBA должен быть цвет в формате RGB.

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



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

Comments

[Алексей Николаев]

Жаль. В целом тоже пришел к выводу, что нельзя. Есть вариант, но геморройный (придется ручками указывать hue, saturation, lighness), а так чтобы - никак. В любом случае, спасибо за ответ.

[Rustam Bainazarov]

Алексей Николаев, можно ещё с помощью SASS HEX-цвета автоматически конвертировать в RGB внутри значения CSS-переменной, конечно.

[Rustam Bainazarov]

Алексей Николаев, а-ля так: