Gamepedia Help Wiki
Advertisement

¿Cuál es la importancia de una variable?[]

Las variables en CSS son una síntaxis versátil que te permite definir un valor en un pitar y utilizarlo en muchísimos otros lugares. Esto tiene 2 beneficios:

  • Podemos escribir la misma cosa menos veces, por lo que disminuye el esfuerzo de cambiarlo constantemente. En vez de cambiarlo en 10000 lugares, lo estamos cambiando en solo uno.
  • Podemos "interrumpir" la cascada (o el orden en el que el CSS funciona), al poner variables cerca del fondo, así tiene que ir hasta arriba nuevamente.

¿Cómo las uso?[]

Definiendo variables[]

Si estás usando el diseñador de temas, este lo hará todo por ti por su propia cuenta. Se recomienda tener en cuenta la sintaxis:

:root {
	--color-blue-side:#0000FF;
	--color-red-side:#FF0000;
}

Ahora tenemos las variables --color-blue-side y --color-red-side, que están definidas mediante el uso de ROOT. Esto significa que están disponibles en TODOS LADOS, pero también recaen en la regla de especificidad. ¿Recuerdas lo comentado sobre la cascada en el inicio? Las definiciones también están en cascada:

.theme-fandomdesktop-light {
	--color-blue-side:#00EAFF;
	--color-red-side:#F86060;
}

Ahora hemos definido estas variables en .theme-fandomdesktop-light, para que así tengan un color mucho más claro. Si tuvieramos AMBAS definiciones al mismo tiempo, entonces en la piel de modo claro, los colores claros se aplicarán gracias a la cascada, y los predeterminados se aplicarán en la piel de modo oscuro.

Usando variables[]

.blue-team {
	background-color:var(--color-blue-side);
}

Esta clase va a tener o un azul oscuro o un azul claro, sin importar el tema que haya sido establecido. La cascada encuentra .blue-team y asume que ya está todo listo, mientras que al mismo tiempo checa todas las variables aplicables hasta que encuentra la más específica, rehaciendo la cascada completa por si sola. Después de ahí, busca la variable para el modo claro y la variable para el modo oscuro, y la aplica cuando ya esté lista.

Es importante recalcar que la alternativa de rodo este profeso haya sido tener que repetir el código de los colores aquí, una vez para .theme-fandomdesktop-light .blue-team y otra para .theme-fandomdesktop-dark .blue-team. Al haces esto, nos da la habilidad de interrumpir toda la cascada, busca todas las variables y las escribe todas por una única vez.

Véase también[]

Advertisement