Cómo usar variables CSS con var()
¿Qué es var() y cómo se utiliza?
var() es una función que permite acceder al valor de una variable CSS definida previamente con la sintaxis --nombre-variable. Las variables se definen en el selector :root (o en un contenedor específico), lo que permite establecer valores globales reutilizables en todo el documento o dentro de un alcance particular.
Sintaxis básica:
:root {
--color-principal: #3498db;
}
.elemento {
background-color: var(--color-principal);
}
En el ejemplo anterior, --color-principal se define como una variable global en :root y se utiliza en .elemento para aplicar el color de fondo.
Cómo definir y utilizar variables CSS
Definir una variable:
1. En el selector :root para definir variables globales:
:root {
--fondo: #f5f5f5;
--padding-general: 20px;
}2. En un contenedor específico para variables locales:
.contenedor {
--espaciado: 10px;
}
Usar var() para aplicar variables:
1. En propiedades de estilo:
.tarjeta {
background-color: var(--fondo);
padding: var(--padding-general);
}2. En combinación con valores fijos:
.titulo {
font-size: calc(var(--padding-general) + 10px);
}
3. Valor por defecto con var(variable, valor-predeterminado):
.alerta {
color: var(--color-texto, red); /* Usará 'red' si '--color-texto' no está definido */
}
El segundo parámetro de var() se utiliza como valor de respaldo si la variable no está disponible.
Ejemplos de uso con var()
1. Cambiar colores temáticos fácilmente:
:root {
--color-fondo: #222;
--color-texto: #fff;
}
.tema-oscuro {
background: var(--color-fondo);
color: var(--color-texto);
}
Al modificar --color-fondo y --color-texto en :root, puedes cambiar el tema de todo el sitio sin necesidad de actualizar múltiples clases.
2. Aplicar espaciados consistentes:
:root {
--espaciado-pequeno: 10px;
--espaciado-grande: 30px;
}
.caja {
margin: var(--espaciado-pequeno);
padding: var(--espaciado-grande);
}Define espaciados una vez y reutilízalos para mantener consistencia en el diseño.
3. Variables locales y herencia:
.card {
--padding-card: 15px;
padding: var(--padding-card);
}
.card-destacada {
--padding-card: 30px; /* Sobrescribe la variable solo en este contexto */
padding: var(--padding-card);
}
Se define --padding-card localmente dentro de .card, y se sobrescribe dentro de .card-destacada, cambiando el relleno solo para ese componente.
4. Tema claro y oscuro:
:root {
--color-fondo: #ffffff;
--color-texto: #333333;
}
body.tema-oscuro {
--color-fondo: #333333;
--color-texto: #ffffff;
}
body {
background: var(--color-fondo);
color: var(--color-texto);
}
Cambiando la clase tema-oscuro en el <body>, se actualizan automáticamente las variables de color para todo el diseño.
¿Cuándo usar var() en CSS?
- Gestión de temas: Facilita la implementación de temas claros y oscuros, así como la personalización de paletas de colores.
- Consistencia de diseño: Asegura que los tamaños, márgenes, y colores se mantengan uniformes en toda la página.
- Mantenimiento simplificado: Cambios en un valor de variable se reflejan automáticamente en todas las instancias donde se utiliza, reduciendo errores y duplicación de código.
Referencia oficial
Para más información, consulta la documentación oficial de MDN sobre var().
Jorge García
Fullstack developer