0

En la carpeta src tengo la siguiente estructura: screens (donde estan todos mis components) y assets (donde se encuentra el archivo variables.scss). El archivo variables.scss tiene las siguientes variables:

$nav-color: #009788;
$sec-color: #6610f2;

Todos los componentes de la carpeta 'screen' utilizan esta variable $nav-color para poder colorear diferentes cosas (fuentes, headers, cards, footers, etc). Por ej:

@import '../../assets/variables.scss';

.clase1{
  color: $nav-color;
}
.clase2{
  background-color: $sec-color;
}

Todo se pinta de manera correcta. Mi pregunta es, es posible de alguna manera modificar el valor de las variables que estan en variables.scss? Como todos los componentes usan esa variable, sería facil modificar solo esas variables para poder pintar de otros colores la aplicación y no tener que ir componente por componente modificandolo (mas de 50 componentes)

Saludos

3
  • Te refieres a cambiar el valor de la variable dinamicamente?
    – Pipe
    Commented el 9 may. 2022 a las 23:14
  • Claro, esas variables pintan toda mi app, y me gustaría que dependiendo de una condición modificar esos colores, asi toda la app se pinta de esos nuevos colores. La condicion podría ser diferentes URL, o algun valor que retorne el login. Pregunto esto porque todos los componentes apuntan a esas variables de colores Commented el 10 may. 2022 a las 18:10
  • Que yo sepa las variables scss son compiladas y reemplazadas por su valor al ser convertidas a css, por lo tanto no existe un nombre de variable que puedas cambiar dinámicamente, lo que si puedes es tener alguna clase que determine el schema de colores de tu app y cambiar esa clase dinámicamente, o lo que también puedes hacer es usar variables de CSS (no de scss, que a esas si las puedes cambiar dinámicamente su valor
    – Pipe
    Commented el 10 may. 2022 a las 18:21

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.