Blog posts are currently only available in Spanish.

1 min read css spanish frontend

Variables en CSS

Una de las ventajas que nos trae CSS para los que hemos desarrollado Backend es la utilización de las variables.

Como utilizarlas:

En root declararemos las variables toda la paleta de colores de nuestra aplicación la cual reutilizaremos en muchas partes y con esto si queremos cambiar el esquema solo sera realizarlo en nuestra definición y el cambio estará realizado.

Ejemplo:

  1. Declaración:
	:root{
		--main-color: #051937;
		--second-color:  #133660;
		--thir-color: #1d578d;
		--four-color: #1f7abb;
		--five-color: #4db6ac;

		--font-title: 'Pacifico', cursive;
	}
  1. Utilización:
	.nav{
		background-color: var(--five-color);
	}
	h2{
		font-family: var(--font-title);
	}

Y de esta forma declaramos no solo los colores si no las fuentes que utilizamos y eso seria todo, utiliza esto en tus próximos proyectos y veras lo útil que es para realizar tu proyecto Frontend.

Danniel Navas

Written by Danniel Navas

Senior Product Engineer. I write about the intersection of good engineering and great user experience. If you liked this, follow me on Twitter .