Variables
Hace unos años, la única forma que teníamos para guardar valores de CSS era mediante preprocesadores como LESS o Sass, a día de hoy tenemos las custom properties que nos permite asignar un valor a una propiedad y poderlo utilizar en múltiples partes del documento, de tal forma que si debemos cambiar su valor, se cambia 1 vez y no en tantas líneas como sitios hemos asignado ese valor a dicha propiedad.
¿Por qué son tan útiles?
- Facilitan el mantenimiento: Si tu sitio web usa un color principal en 50 lugares diferentes, solo tienes que cambiarlo en un sitio (en la variable) en lugar de en 50. Esto es ideal para rediseños o ajustes de marca.
- Código más limpio y legible: Es mucho más fácil entender qué hace color: var(--color-primario); que color: #3498db;. Tu código se documenta a sí mismo.
- Creación de temas (Theming): Son la forma más sencilla de implementar temas como el modo oscuro/claro. Simplemente redefines los valores de las variables para el tema oscuro.
¿Cómo se usan?
Las variables se declaran con dos guiones al principio (--nombre-variable) y se suelen definir dentro del selector :root. :root representa al elemento <html> y hace que la variable esté disponible globalmente en todo tu documento.
:root {
/* Variables de color */
--color-primario: #007bff;
--color-texto: #333333;
--color-fondo: #f8f9fa;
/* Variables de espaciado y tipografía */
--padding-general: 15px;
--fuente-principal: Arial, sans-serif;
--radio-borde: 8px;
}Para usar una variable, utilizas la función var() y le pasas el nombre de la variable como argumento.
body {
font-family: var(--fuente-principal);
background-color: var(--color-fondo);
color: var(--color-texto);
}
.card {
background-color: white;
padding: var(--padding-general);
border-radius: var(--radio-borde);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.button {
background-color: var(--color-primario);
color: white;
padding: 10px var(--padding-general);
border-radius: var(--radio-borde);
border: none;
}Veamos el ejemplo completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="1. variables.css">
</head>
<body>
<h1>Ejemplo de variables o custom properties</h1>
<main>
<section class="card">
<h2>Título de la Tarjeta</h2>
<p>Este es un ejemplo de cómo usar variables CSS para mantener un estilo consistente.</p>
<button class="button">Saber más</button>
</section>
</main>
</body>
</html>La función var() puede aceptar un segundo valor como fallback (respaldo). Si la variable no está definida, usará este valor por defecto.
.button {
background-color: var(--color-primario, blue);
color: white;
padding: 10px var(--padding-general);
border-radius: var(--radio-borde);
border: none;
cursor: pointer;
}