Variables

Las variables de CSS, también conocidas como propiedades personalizadas de CSS, ofrecen una forma de definir valores reutilizables a lo largo de nuestro código CSS. Al utilizar variables, es posible crear diseños dinámicos y flexibles que resultan más sencillos de mantener y actualizar.

Para declarar una variable, se utiliza la pseudo-clase :root al inicio del archivo CSS y se antepone el nombre de la variable con --. Por ejemplo, para definir una variable --blue-color con el valor #3f42f3 en el bloque :root:

:root {
  --blue-color: #3f42f3;
}

Una vez declarada la variable, se puede aplicar a cualquier propiedad de CSS utilizando la función var(). Por ejemplo, para asignar a la propiedad color de un elemento <h1> el valor de la variable --blue-color, se puede escribir:

h1 {
  color: var(--blue-color);
}

A continuación, se combina el conocimiento sobre la declaración y el uso de variables en el siguiente ejemplo:

En este ejemplo, se definen y aplican cinco variables a cualquier propiedad. Al cambiar los valores de estas variables, es posible actualizar fácilmente los colores en toda la hoja de estilos.

Sobrescribir propiedades

En ocasiones, es necesario sobrescribir propiedades específicas en CSS para lograr el estilo deseado. Esto se puede lograr declarando una propiedad con el mismo nombre dentro de un selector anidado y asignándole un nuevo valor.

Considere el siguiente ejemplo de un semáforo con diferentes señales de color:

Al dirigirnos a las clases de señal específicas, es posible ajustar con precisión el color de cada señal mientras se mantienen los estilos compartidos definidos en el selector base .signal.

Nota

En conclusión, las variables CSS ofrecen flexibilidad y facilidad de mantenimiento, permitiendo actualizaciones dinámicas de diseño, mientras que la sobrescritura de propiedades posibilita ajustar los estilos y lograr los efectos visuales deseados.