Variables y Funciones CSS

CSS ha evolucionado significativamente desde sus inicios, incorporando características que permiten escribir código más mantenible y reutilizable. Las variables CSS (también conocidas como propiedades personalizadas) y las funciones CSS representan dos de las herramientas más importantes para crear hojas de estilo modernas y eficientes.

Variables CSS (Custom Properties)

Las variables CSS son propiedades personalizadas que permiten almacenar valores específicos para reutilizarlos a lo largo de toda la hoja de estilos. Esta funcionalidad elimina la repetición de código y facilita enormemente el mantenimiento de proyectos web.

Declaración de variables

Las variables CSS se declaran utilizando el prefijo -- seguido del nombre que queramos asignar. La declaración más común se realiza en el selector :root, que hace que las variables estén disponibles globalmente:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-large: 24px;
  --spacing-medium: 16px;
}

Uso de variables con la función var()

Para utilizar una variable declarada, empleamos la función var() que acepta el nombre de la variable como parámetro:

.header {
  background-color: var(--primary-color);
  font-size: var(--font-size-large);
  padding: var(--spacing-medium);
}

.button {
  background-color: var(--secondary-color);
  margin: var(--spacing-medium);
}

Valores de respaldo

La función var() permite definir un valor de respaldo que se utilizará si la variable no está definida:

.element {
  color: var(--text-color, #333333);
  font-size: var(--custom-size, 16px);
}

Funciones CSS Esenciales

CSS proporciona diversas funciones integradas que permiten realizar cálculos y manipulaciones de valores de forma dinámica.

Función calc()

La función calc() permite realizar operaciones matemáticas directamente en CSS, combinando diferentes unidades de medida:

.container {
  width: calc(100% - 40px);
  height: calc(100vh - 80px);
  margin: calc(var(--spacing-medium) * 2);
}

.sidebar {
  width: calc(25% + 10px);
  padding: calc(1rem + 5px);
}

Funciones de color

CSS ofrece varias funciones para trabajar con colores de forma dinámica:

Función rgb() y rgba():

.box {
  background-color: rgb(52, 152, 219);
  border-color: rgba(52, 152, 219, 0.5);
}

Función hsl() y hsla():

.gradient-box {
  background-color: hsl(204, 70%, 53%);
  box-shadow: 0 4px 8px hsla(204, 70%, 53%, 0.3);
}

Funciones de dimensiones

Las funciones min(), max() y clamp() proporcionan control responsivo sobre las dimensiones:

Función min():

.responsive-width {
  width: min(90%, 800px);
  font-size: min(4vw, 24px);
}

Función max():

.minimum-height {
  height: max(300px, 50vh);
  padding: max(16px, 2vw);
}

Función clamp():

.fluid-typography {
  font-size: clamp(16px, 4vw, 32px);
  padding: clamp(8px, 2vw, 24px);
}

Combinando Variables y Funciones

La verdadera potencia se alcanza al combinar variables con funciones, creando sistemas de diseño flexibles y mantenibles:

:root {
  --base-font-size: 16px;
  --scale-factor: 1.25;
  --primary-hue: 204;
  --container-max-width: 1200px;
  --spacing-unit: 8px;
}

.heading {
  font-size: calc(var(--base-font-size) * var(--scale-factor));
  color: hsl(var(--primary-hue), 70%, 40%);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.container {
  max-width: var(--container-max-width);
  width: min(90%, var(--container-max-width));
  padding: calc(var(--spacing-unit) * 2);
}

Ámbito y Herencia de Variables

Las variables CSS siguen las reglas de herencia y cascada. Pueden declararse en cualquier selector y su ámbito se limita a ese elemento y sus descendientes:

.theme-dark {
  --text-color: #ffffff;
  --background-color: #2c3e50;
}

.theme-light {
  --text-color: #333333;
  --background-color: #ffffff;
}

.content {
  color: var(--text-color);
  background-color: var(--background-color);
  transition: all 0.3s ease;
}

Esta aproximación permite crear sistemas de temas dinámicos donde cambiar una clase en el elemento padre modifica automáticamente toda la apariencia de los elementos descendientes.

Las variables y funciones CSS transforman la manera de escribir estilos, proporcionando herramientas que antes solo estaban disponibles en preprocesadores. Su compatibilidad nativa con los navegadores modernos las convierte en una elección ideal para proyectos contemporáneos que requieren flexibilidad y mantenibilidad.