0

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);

1 respuesta 1

0

Encontré un poco de información que podría ser de ayuda, a pesar de tener una notación similar entre ambas notaciones no todas son funcionales debido a los aspectos propios de CSS, por ejemplo cuando usamos $color-prueba: #2b880e; background: rgba($color-prueba, 0.08); esta funciona debido a que recibe el valor directamente de una variable local, esto cambia cuando utilizamos una notación con variables :root del tipo background: rgba($color-3, 0.08); , debido a que el atributo background: rgba(); recibe un valor directamente y no una función que hace referencia a un valor, el paso por una función requiere que los parámetros se pasen antes de la compilación y, por lo tanto, no puede funcionar con variables de css que pueden cambiar en cualquier momento.

Anexo la información oficial que encontré y que espero te sea de mucha ayuda.

https://sass-lang.com/documentation/modules/color

https://sass-lang.com/documentation/modules#rgba

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.