Estoy desarrollando una App con React y tengo acceso a las variable CSS a través del proyecto. Sin embargo al momento de querer realizar un estilo background: rgba($color-3, 0.08);
este no funciona y me retorna en el navegador background: rgba(var(--color-3), 0.08);
hecho por el cual el background no se muestra. Realice una prueba declarando una variable dentro de la clase $color-prueba: #2b880e; background: rgba($color-prueba, 0.08);
funcionando y retornando el siguiente resultado background: rgba(43, 136, 14, 0.08);
, hecho por el cual no sé cómo solucionarlo y me encuentro atorado debido a que necesito consumir las variables root.
Mi ejemplo de las variables root de CSS es así:
:root {
--color-3: #2b880e;
}
Las cuales consumo a un archivo de scss para mis variables globales:
$color-3: var(--color-3);
y mi implementación:
/* Funciona */
background: $color-3;
/* No funciona */
background: rgba($color-3, 0.08);
/* Funciona */
$color-prueba: #2b880e;
background: rgba($color-prueba, 0.08);