Para poder usar rgba()
junto a variables sass y custom properties hay que transformar el valor del color a rgb, no es válido en hexadecimal.
A continuación 2 formas de usar variables SASS + custom properties en colores rgba y poder hacer uso de la transparencia principalmente.
A). Usando solo un mixin:
@function hexToRGB($hex) { @return red($hex), green($hex), blue($hex); } $color-primary: #ff0000; :root { --color-primary-rgb: #{hexToRGB($color-primary)}; } h1{ color: rgba(var(--color-primary-rgb), 0.5); }
2. Haciendo uso de la función color de SASS:
@use "sass:color"; $color-primary: #ff0000; :root { --color-primary-rgb: #{color.adjust($color-primary, $alpha: -0.5)}; } h1{ color: var(--color-primary-rgb); }
Personalmente creo que resulta más cómoda y flexible la opción de usar un mixin.
Agradezco tu comentario 🤘