CSS: rgba() en variables SASS + custom properties

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.