Cambiar un color de marca en un proyecto grande solía significar buscar y reemplazar ese valor en decenas de sitios del CSS, con el riesgo de dejarte alguno por el camino. Las variables CSS, también llamadas custom properties, resuelven eso de raíz: defines el valor una vez y lo reutilizas donde haga falta, así que cambiarlo después es cuestión de tocar una sola línea.
Qué son las variables CSS
Funcionan como las variables de cualquier lenguaje de programación: guardas un valor, le pones nombre y lo llamas donde lo necesites. Se declaran normalmente dentro de :root, para que estén disponibles en toda la hoja de estilos.
/* Definición de variables en :root */
:root {
--color-primario: #3498db;
--color-secundario: #2ecc71;
--tamano-fuente-base: 16px;
}
/* Uso de las variables */
body {
font-size: var(--tamano-fuente-base);
color: var(--color-primario);
}
h1 {
color: var(--color-secundario);
}
Si mañana el cliente decide cambiar el color primario, solo tocas el valor dentro de :root y el cambio se propaga automáticamente a cada sitio donde usábamos --color-primario.
Por qué merece la pena usarlas
- Centralizas valores que se repiten: colores de marca, tipografías, espaciados, todo en un mismo sitio en lugar de repartido por el archivo.
- Facilitan cambios dinámicos: puedes ajustar valores según el tema (claro/oscuro) o el tamaño de pantalla sin duplicar reglas.
- El código se lee mejor: nada de valores sueltos repetidos por todo el archivo que nadie recuerda de dónde salieron.
- Compatibilidad amplia: funcionan en todos los navegadores modernos, salvo versiones ya obsoletas que apenas quedan en uso.
Tres usos prácticos
Cambio de tema claro/oscuro
Este es el caso donde más se nota la ventaja de las variables. Como ya contamos al hablar de cómo hacer un dark mode bien hecho y accesible, redefinir un par de variables basta para cambiar toda la paleta de la web:
/* Definimos variables globales */
:root {
--color-fondo: #ffffff;
--color-texto: #333333;
}
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}
/* Tema oscuro */
body.tema-oscuro {
--color-fondo: #222222;
--color-texto: #f5f5f5;
}Con este código, activar el modo oscuro es tan simple como añadir la clase tema-oscuro al <body> con JavaScript:
document.body.classList.toggle('tema-oscuro');Tipografía que se adapta al tamaño de pantalla
Combinadas con media queries, las variables permiten ajustar valores según el ancho de pantalla sin repetir reglas para cada elemento, algo clave si quieres evitar los errores de diseño responsive más comunes:
:root {
--tamano-fuente: 16px;
}
@media (min-width: 768px) {
:root {
--tamano-fuente: 18px;
}
}
@media (min-width: 1200px) {
:root {
--tamano-fuente: 20px;
}
}
body {
font-size: var(--tamano-fuente);
}
El tamaño de fuente crece con la pantalla sin que tengas que tocar cada selector uno a uno.
Gradientes y sombras reutilizables
También sirven para valores más complejos, como un gradiente de marca o la sombra estándar de tus tarjetas:
:root {
--gradiente-primario: linear-gradient(to right, #3498db, #2ecc71);
--sombra-card: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.card {
background: var(--gradiente-primario);
box-shadow: var(--sombra-card);
padding: 20px;
border-radius: 8px;
}
Así reutilizas el mismo gradiente o la misma sombra en todos los componentes que la necesiten, sin copiar y pegar el valor una y otra vez.
Dos trucos que se usan menos de lo que deberían
Combinarlas con calc()
Puedes hacer operaciones matemáticas directamente con el valor de una variable:
:root {
--espaciado-base: 8px;
}
.contenedor {
padding: calc(var(--espaciado-base) * 2);
}
Redefinirlas dentro de un componente
Una variable puede declararse dentro de un selector concreto y sobrescribirse solo ahí, sin tocar el resto del proyecto:
.boton {
--color-texto: #fff;
--color-fondo: #3498db;
background: var(--color-fondo);
color: var(--color-texto);
}
.boton-secundario {
--color-fondo: #2ecc71;
}
El botón secundario solo sobrescribe --color-fondo y hereda el resto de propiedades del botón original, sin duplicar ni una línea de más.
Con estos ejemplos ya tienes base suficiente para meter variables CSS en tu próximo proyecto, sea para un cambio de tema, un diseño responsive o simplemente para dejar de repetir valores por todo el archivo.
Preguntas frecuentes
¿Las variables CSS funcionan en todos los navegadores?
Sí, en todos los navegadores modernos. Solo dan problemas en versiones muy antiguas de Internet Explorer, que hoy apenas tienen uso.
¿En qué se diferencian de las variables de Sass?
Las de Sass se resuelven al compilar y quedan fijas en el CSS final. Las variables CSS viven en el navegador, así que puedes cambiarlas en tiempo real con JavaScript, algo que Sass no permite.
¿Puedo usar variables CSS y Sass a la vez?
Sí, y es habitual combinarlas: Sass para la lógica de compilación y variables CSS para los valores que necesitan cambiar en el navegador, como el tema claro/oscuro.
¿Afectan las variables CSS al rendimiento?
El impacto es mínimo en la práctica. El navegador las resuelve de forma muy eficiente, y la ganancia en mantenimiento del código compensa con creces cualquier coste teórico.
