Variables en CSS

¿Qué son las variables de CSS?

Custom Properties, también conocidas como variables de CSS o variables en cascada son entidades definidas por los autores de CSS que representan valores específicos que se reutilizarán en todo un documento. Literalmente son variables que se pueden reutilizar en un mismo archivo.

Como ejemplos de algunas variables que se peuden reutilizar son colores, bordes, tamaños u otros estilos que serán usados más de una vez en una aplicación.

Estructura de variables de CSS

Los nombres pueden ser escritos de cualquier forma, siempre y cuando no contenga espacios. Para declarar las variables de CSS se tienen que hacer dentro de la pseudo-clase root.

CSS
Copiar
:root{
  --primary-color: blue; 
}

Uso

Para usar las variables de CSS, se tiene que usar la función var(). Normalmente para asignar un valor, se asigna la propiedad acompañada del valor, pero, en lugar de el valor, se escribirá la función var() que contendrá el nombre de la variable que queremos usar.

CSS
Copiar
:root{
  --primary-color: blue; 
}

p{
  color: var(--primary-color);
}

Otro casos donde se pueden utilizar las variables de CSS son para declarar clases que se utilizarán más de una vez a lo largo de la aplicación. Esto para acceder fácilmente a aquellos valores que podrían modificarse en un futuro.

CSS
Copiar
:root{
  --caja: flex;
  --alineacion--vertical: center;
  --alineacion-horizontal: center;
}

.centrar-div{
  display: var(--caja);
  align-items: var(--alineacion--vertical);
  justify-content: var(--alineacion-horizontal);
}

En CSS, las variables son contenedores para almacenar valores que se pueden reutilizar en todo el documento. Se definen con el prefijo -- y se accede a ellas utilizando la función var(). Las variables facilitan la gestión y la consistencia de estilos en una aplicación web al permitir cambios globales con una sola modificación.