Tutorial CSS: Funciones matemáticas

Cálculos dinámicos con calc() y operadores matemáticos

La función calc() es una de las herramientas más útiles en CSS moderno, permitiéndonos realizar operaciones matemáticas directamente en nuestras hojas de estilo. Esta capacidad transforma la forma en que definimos valores de propiedades, haciendo posible combinar diferentes unidades y crear diseños más dinámicos y adaptables.

Sintaxis básica

La sintaxis de calc() es sencilla: recibe una expresión matemática como argumento y devuelve el resultado del cálculo. Puedes usar los operadores aritméticos básicos:

• Suma (+)
• Resta (-)
• Multiplicación (*)
• División (/)

.elemento {
  width: calc(100% - 40px);
}

En este ejemplo, el ancho del elemento será igual al 100% del contenedor padre menos 40 píxeles, creando un margen fijo a los lados.

Combinando unidades diferentes

Una de las ventajas principales de calc() es la capacidad de combinar diferentes unidades de medida en una misma operación:

.contenedor {
  padding: calc(1rem + 2vw);
  margin-top: calc(20px + 2em);
  width: calc(100% / 3 - 20px);
}

Esto permite crear diseños que combinan medidas relativas (como porcentajes o em) con medidas absolutas (como píxeles), algo imposible de lograr sin esta función.

Espaciado entre elementos

Un uso común de calc() es crear espaciado consistente entre elementos:

.galeria {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
  gap: 20px;
}

Este código crea una galería de tres columnas con un espacio de 20px entre ellas, distribuyendo el espacio disponible de manera uniforme.

Anidando funciones calc()

También podemos anidar funciones calc() para operaciones más complejas, aunque generalmente es mejor simplificar la expresión cuando sea posible:

.elemento {
  /* Esto funciona, pero es mejor simplificarlo */
  width: calc(100% - calc(20px + 2em));
  
  /* Versión simplificada */
  height: calc(100% - 20px - 2em);
}

Operaciones con variables CSS

La función calc() se vuelve aún más potente cuando se combina con variables CSS:

:root {
  --spacing-unit: 8px;
  --container-width: 1200px;
}

.contenedor {
  width: calc(var(--container-width) - 2 * var(--spacing-unit));
  padding: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

Esta combinación permite crear sistemas de diseño más mantenibles y coherentes.

Consideraciones de rendimiento

Aunque calc() es muy útil, es importante tener en cuenta algunas consideraciones:

• Deja espacios alrededor de los operadores para evitar errores de interpretación:

/* Correcto */
width: calc(100% - 20px);

/* Incorrecto - puede causar errores */
width: calc(100%-20px);

• Evita cálculos excesivamente complejos que podrían afectar el rendimiento:

/* Mejor evitar expresiones muy complejas */
margin: calc((100vw - 20px) / 4 * (1 + 2 / (3 + 2 * var(--ratio))));

Ejemplos prácticos

Centrado vertical con altura dinámica

.centrado-vertical {
  position: absolute;
  top: calc(50% - (150px / 2));
  height: 150px;
}

Diseño de columnas adaptativas

.columna {
  width: calc(25% - 20px);
  margin: 0 10px;
  float: left;
}

Ajuste de tamaño de fuente responsivo

.titulo {
  font-size: calc(16px + 2vw);
}

Este enfoque crea un tamaño de fuente que crece proporcionalmente con el ancho de la ventana, manteniendo un tamaño mínimo legible.

Creación de márgenes negativos controlados

.contenedor-expandido {
  margin: 0 calc(-1 * var(--padding-contenedor));
  padding: 20px var(--padding-contenedor);
}

Este patrón es útil para crear elementos que se extiendan más allá de los límites de su contenedor, como fondos a ancho completo dentro de contenedores con ancho máximo.

Compatibilidad con navegadores

La función calc() tiene excelente soporte en navegadores modernos. Sin embargo, si necesitas compatibilidad con navegadores muy antiguos, considera proporcionar un valor alternativo:

.elemento {
  /* Fallback para navegadores antiguos */
  width: 90%;
  /* Valor moderno con calc() */
  width: calc(100% - 40px);
}

La función calc() ha transformado la forma en que definimos valores en CSS, permitiéndonos crear diseños más flexibles y mantenibles que se adaptan a diferentes contextos y dispositivos.

Valores responsivos adaptativos con min() y max()

Las funciones min() y max() son herramientas esenciales para crear diseños verdaderamente adaptativos en CSS moderno. Estas funciones matemáticas permiten establecer límites dinámicos para propiedades, facilitando la creación de interfaces que se ajustan automáticamente a diferentes tamaños de pantalla sin necesidad de media queries adicionales.

Función min()

La función min() evalúa dos o más expresiones y devuelve el valor más pequeño entre ellas. Su sintaxis es simple:

.elemento {
  width: min(valor1, valor2, ...valorN);
}

Esta función resulta especialmente útil para establecer tamaños máximos que se adaptan automáticamente:

.contenedor {
  width: min(90%, 1200px);
  margin: 0 auto;
}

En este ejemplo, el contenedor tendrá un ancho del 90% del elemento padre, pero nunca superará los 1200px. Esto elimina la necesidad de escribir:

/* Enfoque tradicional que min() reemplaza */
.contenedor {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Función max()

Por otro lado, la función max() evalúa dos o más expresiones y devuelve el valor más grande entre ellas:

.elemento {
  width: max(valor1, valor2, ...valorN);
}

Esta función es perfecta para establecer tamaños mínimos que garantizan la legibilidad:

.texto-adaptativo {
  font-size: max(16px, 3vw);
}

En este caso, el tamaño de fuente será al menos de 16px, pero aumentará proporcionalmente al 3% del ancho de la ventana cuando este valor sea mayor.

Casos de uso prácticos

Anchos adaptativos con límites

.tarjeta {
  width: min(100%, 400px);
  padding: min(5%, 30px);
}

Esta tarjeta ocupará el 100% del ancho disponible en pantallas pequeñas, pero se limitará a 400px en pantallas más grandes. El padding también se ajusta proporcionalmente.

Márgenes que respetan el espacio mínimo

.seccion {
  margin: max(20px, 5vw);
}

Este código garantiza un margen mínimo de 20px, pero lo aumenta al 5% del ancho de la ventana en pantallas más grandes.

Tipografía fluida

.titulo {
  font-size: max(24px, min(5vw, 60px));
}

Este ejemplo crea un tamaño de fuente que:

• Nunca será menor de 24px (para mantener la legibilidad)
• Crecerá proporcionalmente al 5% del ancho de la ventana
• Nunca superará los 60px (para evitar tamaños excesivos)

Columnas adaptativas

.columna {
  width: min(100%, max(300px, 25%));
}

Estas columnas ocuparán el 25% del espacio disponible, pero nunca serán más estrechas que 300px. En pantallas muy pequeñas, ocuparán el 100% del ancho.

Combinando min() y max() con otras funciones

Estas funciones pueden combinarse con calc() y variables CSS para crear sistemas de diseño aún más flexibles:

:root {
  --padding-base: 20px;
}

.contenedor {
  padding: min(var(--padding-base), 5vw);
  width: calc(100% - min(var(--padding-base) * 2, 10vw));
}

Anidando min() y max()

Podemos anidar estas funciones para crear comportamientos más complejos:

.elemento {
  width: min(max(300px, 50%), 800px);
}

Este elemento:

• Tendrá al menos 300px de ancho
• Preferentemente ocupará el 50% del contenedor
• Nunca superará los 800px de ancho

Compatibilidad entre navegadores

Las funciones min() y max() tienen buen soporte en navegadores modernos, pero para mayor compatibilidad, podemos proporcionar alternativas:

.contenedor {
  /* Fallback para navegadores antiguos */
  width: 90%;
  max-width: 1200px;
  
  /* Solución moderna con min() */
  width: min(90%, 1200px);
}

Ventajas sobre media queries

Aunque las media queries siguen siendo importantes, las funciones min() y max() ofrecen varias ventajas:

• Código más conciso: reducen la necesidad de reglas duplicadas en diferentes breakpoints
• Adaptación continua: responden a cada píxel de cambio, no solo a puntos de ruptura específicos
• Mantenimiento simplificado: centralizan la lógica de adaptación en una sola declaración

/* Con media queries (enfoque tradicional) */
.elemento {
  width: 100%;
}
@media (min-width: 768px) {
  .elemento {
    width: 50%;
  }
}

/* Con min() (enfoque moderno) */
.elemento {
  width: min(100%, 50rem);
}

Consideraciones importantes

Al trabajar con estas funciones, ten en cuenta:

• Deja espacios entre comas para mejorar la legibilidad
• Usa paréntesis para clarificar el orden de evaluación en expresiones complejas
• Considera la accesibilidad al establecer valores mínimos, especialmente para tamaños de texto

/* Buena práctica: espaciado y paréntesis claros */
.elemento {
  padding: min(5%, (30px + 2vw));
}

Las funciones min() y max() representan un cambio significativo en cómo abordamos el diseño responsivo, permitiéndonos crear interfaces que se adaptan fluidamente a cualquier tamaño de pantalla con menos código y mayor precisión.

Control de rango con clamp() para valores acotados

La función clamp() es una herramienta poderosa en CSS moderno que permite establecer un valor que se ajusta automáticamente dentro de un rango definido. Esta función combina la funcionalidad de min() y max() en una sola expresión más concisa, facilitando la creación de elementos que se adaptan de forma controlada a diferentes tamaños de pantalla.

Sintaxis básica

La función clamp() acepta tres parámetros en este orden:

.elemento {
  propiedad: clamp(valor-mínimo, valor-preferido, valor-máximo);
}

Donde:

• valor-mínimo: el valor más pequeño permitido
• valor-preferido: el valor ideal que se utilizará cuando sea posible
• valor-máximo: el valor más grande permitido

El navegador seleccionará automáticamente:

• El valor mínimo si el valor preferido es menor que este
• El valor máximo si el valor preferido es mayor que este
• El valor preferido cuando está dentro del rango especificado

Casos de uso prácticos

Tipografía fluida controlada

Uno de los usos más comunes de clamp() es crear tamaños de texto que se ajustan al tamaño de la pantalla pero dentro de límites legibles:

.titulo {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Este título:

• Nunca será más pequeño que 1.5rem (24px con tamaño base de 16px)
• Se ajustará fluidamente al 5% del ancho de la ventana
• Nunca excederá los 3rem (48px con tamaño base de 16px)

Anchos de contenedor adaptativos

clamp() es perfecto para crear contenedores que se adaptan al espacio disponible manteniendo proporciones adecuadas:

.contenedor {
  width: clamp(320px, 80%, 1200px);
  margin: 0 auto;
}

Este contenedor:

• Tendrá un mínimo de 320px de ancho (para pantallas muy pequeñas)
• Ocupará el 80% del ancho disponible en la mayoría de los casos
• Nunca superará los 1200px de ancho (para evitar líneas de texto demasiado largas)

Espaciado proporcional pero controlado

El espaciado entre elementos también puede beneficiarse de clamp():

.seccion {
  padding: clamp(1rem, 5vw, 3rem);
}

Este padding:

• Será de al menos 1rem (16px) en dispositivos pequeños
• Se ajustará al 5% del ancho de la ventana en tamaños intermedios
• No superará los 3rem (48px) en pantallas grandes

Altura de elementos interactivos

Para botones y otros elementos interactivos, clamp() ayuda a mantener tamaños táctiles adecuados:

.boton {
  height: clamp(44px, 8vh, 80px);
  padding: 0 clamp(1rem, 3vw, 2rem);
}

Este botón:

• Mantiene una altura mínima de 44px (recomendada para elementos táctiles)
• Se adapta proporcionalmente en pantallas medianas
• Limita su crecimiento a 80px para mantener la coherencia visual

Ventajas sobre combinaciones de min() y max()

Aunque podemos lograr el mismo resultado combinando min() y max(), clamp() ofrece una sintaxis más concisa y legible:

/* Usando min() y max() anidados */
.elemento {
  width: max(320px, min(80%, 1200px));
}

/* Equivalente usando clamp() */
.elemento {
  width: clamp(320px, 80%, 1200px);
}

Creando sistemas de diseño escalables

clamp() es especialmente útil para crear sistemas de diseño coherentes que se adaptan a diferentes contextos:

:root {
  --spacing-base: clamp(0.5rem, 1vw, 1rem);
}

.card {
  padding: var(--spacing-base);
  margin-bottom: calc(var(--spacing-base) * 2);
  border-radius: calc(var(--spacing-base) * 0.5);
}

Este enfoque crea un sistema de espaciado que mantiene proporciones coherentes en todos los tamaños de pantalla.

Ejemplos avanzados

Columnas que respetan el ancho mínimo de lectura

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30%, 350px), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

Este grid:

• Crea columnas que ocupan idealmente el 30% del espacio
• Garantiza que ninguna columna sea más estrecha que 280px
• Limita el ancho máximo de columna a 350px
• Ajusta automáticamente el número de columnas según el espacio disponible

Márgenes negativos controlados

.full-bleed {
  margin-inline: clamp(-2rem, -5vw, -5rem);
  padding-inline: clamp(2rem, 5vw, 5rem);
}

Este patrón permite crear elementos que se extienden más allá de sus contenedores, pero de manera controlada.

Consideraciones importantes

Al trabajar con clamp(), ten en cuenta estas recomendaciones:

• Accesibilidad: Siempre establece tamaños mínimos de texto que garanticen la legibilidad (generalmente no menos de 16px o 1rem)

/* Buena práctica para accesibilidad */
p {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

• Unidades mixtas: Puedes combinar diferentes unidades en los tres parámetros

.elemento {
  margin: clamp(1rem, 5%, 50px);
}

• Rendimiento: Aunque clamp() es eficiente, evita cálculos excesivamente complejos dentro de la función

/* Mejor simplificar expresiones complejas */
.elemento {
  width: clamp(300px, 50% + 2rem, 800px);
}

Compatibilidad con navegadores

La función clamp() tiene buen soporte en navegadores modernos, pero para mayor compatibilidad, puedes proporcionar alternativas:

.contenedor {
  /* Fallback para navegadores antiguos */
  width: 80%;
  min-width: 320px;
  max-width: 1200px;
  
  /* Solución moderna con clamp() */
  width: clamp(320px, 80%, 1200px);
}

Depuración de valores clamp()

Cuando trabajas con clamp(), puede ser útil entender qué valor se está aplicando en diferentes tamaños de pantalla:

.debug-element::before {
  content: "Valor actual: " attr(style);
  display: block;
  font-size: 14px;
  color: #666;
}

.debug-element {
  font-size: clamp(1rem, 3vw, 2rem);
}

La función clamp() representa un avance significativo en la creación de diseños responsivos, permitiendo establecer límites claros mientras mantenemos la adaptabilidad. Al combinar la funcionalidad de min() y max() en una sola expresión, simplifica nuestro código y hace que nuestros diseños sean más robustos y mantenibles.

Combinación de funciones matemáticas y variables CSS

La verdadera potencia de las funciones matemáticas en CSS se revela cuando las combinamos con variables CSS (también conocidas como propiedades personalizadas). Esta integración nos permite crear sistemas de diseño dinámicos, mantenibles y altamente adaptables que responden a diferentes contextos y necesidades.

Fundamentos de la integración

Las variables CSS y las funciones matemáticas se complementan perfectamente: las variables almacenan valores que pueden ser reutilizados, mientras que las funciones matemáticas permiten manipular esos valores de forma dinámica.

:root {
  --spacing-unit: 8px;
  --main-color: #3366ff;
  --color-intensity: 0.8;
}

.card {
  /* Combinando calc() con variables */
  padding: calc(var(--spacing-unit) * 2);
  
  /* Manipulando colores con variables */
  background-color: rgba(var(--main-color), var(--color-intensity));
}

Creación de sistemas de espaciado escalables

Un uso común es crear un sistema de espaciado coherente que se pueda ajustar globalmente:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --scale-factor: 1;
}

.container {
  /* Espaciado que se escala uniformemente */
  padding: calc(var(--space-md) * var(--scale-factor));
  gap: calc(var(--space-sm) * var(--scale-factor));
  margin-bottom: calc(var(--space-lg) * var(--scale-factor));
}

@media (min-width: 768px) {
  :root {
    /* Ajustar el factor de escala en pantallas más grandes */
    --scale-factor: 1.5;
  }
}

Este enfoque permite ajustar todo el espaciado de la interfaz modificando una sola variable.

Sistemas tipográficos adaptativos

Podemos crear un sistema tipográfico que combine clamp() con variables CSS para lograr una escala tipográfica fluida:

:root {
  --font-size-base: 16px;
  --font-scale-ratio: 1.25;
  --viewport-adjustment: 0.5vw;
}

h1 {
  font-size: clamp(
    calc(var(--font-size-base) * var(--font-scale-ratio) * 2),
    calc(var(--font-size-base) * 2 + var(--viewport-adjustment) * 3),
    calc(var(--font-size-base) * var(--font-scale-ratio) * 3)
  );
}

h2 {
  font-size: clamp(
    calc(var(--font-size-base) * var(--font-scale-ratio)),
    calc(var(--font-size-base) * 1.5 + var(--viewport-adjustment) * 2),
    calc(var(--font-size-base) * var(--font-scale-ratio) * 2)
  );
}

Este sistema permite ajustar toda la escala tipográfica modificando solo unas pocas variables base.

Temas y modos de color dinámicos

La combinación de funciones matemáticas y variables CSS es especialmente útil para implementar temas y modos de color:

:root {
  /* Colores base */
  --hue-primary: 210;
  --saturation-base: 80%;
  --lightness-base: 50%;
  
  /* Derivación de colores */
  --color-primary: hsl(var(--hue-primary), var(--saturation-base), var(--lightness-base));
  --color-secondary: hsl(calc(var(--hue-primary) + 180), var(--saturation-base), var(--lightness-base));
  --color-accent: hsl(calc(var(--hue-primary) + 60), var(--saturation-base), var(--lightness-base));
}

.dark-theme {
  --lightness-base: 40%;
  --saturation-base: 70%;
}

.button-primary {
  background-color: var(--color-primary);
  /* Crear un color hover ligeramente más claro */
  --hover-lightness: calc(var(--lightness-base) + 10%);
  --hover-color: hsl(var(--hue-primary), var(--saturation-base), var(--hover-lightness));
}

.button-primary:hover {
  background-color: var(--hover-color);
}

Este enfoque permite crear temas completos modificando solo unas pocas variables de color base.

Layouts responsivos avanzados

Podemos crear layouts complejos que se adaptan a diferentes tamaños de pantalla combinando min(), max() y clamp() con variables CSS:

:root {
  --content-width: 1200px;
  --padding-container: 20px;
  --columns-min: 280px;
  --columns-ideal: 350px;
  --gap-size: 24px;
}

.container {
  width: min(var(--content-width), 100% - calc(var(--padding-container) * 2));
  margin-inline: auto;
  padding: var(--padding-container);
}

.grid {
  display: grid;
  /* Columnas que se ajustan automáticamente */
  grid-template-columns: repeat(
    auto-fit, 
    minmax(
      min(100%, var(--columns-min)), 
      max(var(--columns-ideal), 100%/3)
    )
  );
  gap: clamp(calc(var(--gap-size) / 2), 2vw, var(--gap-size));
}

Cálculos anidados para interfaces complejas

Para interfaces más complejas, podemos anidar funciones matemáticas y variables:

:root {
  --base-size: 16px;
  --ratio: 1.5;
  --container-padding: calc(var(--base-size) * 2);
  --content-max-width: 1200px;
}

.sidebar {
  /* Ancho que se adapta al contenedor pero mantiene proporciones legibles */
  width: clamp(
    calc(var(--base-size) * 15),
    calc(30% - var(--container-padding)),
    calc(var(--content-max-width) * 0.25)
  );
  
  /* Altura que se adapta al contenido pero mantiene un mínimo */
  height: max(
    calc(100vh - calc(var(--base-size) * var(--ratio) * 4)),
    calc(var(--base-size) * 30)
  );
}

Creación de componentes adaptables

Podemos diseñar componentes que se adaptan a diferentes contextos utilizando variables CSS y funciones matemáticas:

.card-system {
  --card-padding-base: 16px;
  --card-border-radius: 8px;
  --card-shadow-blur: 10px;
}

.card {
  padding: var(--card-padding-base);
  border-radius: var(--card-border-radius);
  box-shadow: 0 calc(var(--card-shadow-blur) / 2) var(--card-shadow-blur) rgba(0, 0, 0, 0.1);
}

.card-compact {
  --card-padding-base: 8px;
  --card-border-radius: 4px;
  --card-shadow-blur: 5px;
}

.card-expanded {
  --card-padding-base: clamp(16px, 3vw, 32px);
  --card-border-radius: 12px;
  --card-shadow-blur: 20px;
}

Este enfoque permite crear variantes de componentes simplemente modificando las variables en diferentes contextos.

Técnicas avanzadas de manipulación de variables

Podemos aprovechar el ámbito de las variables CSS junto con las funciones matemáticas para crear efectos sofisticados:

.accordion {
  --is-open: 0;
  --max-height: 300px;
}

.accordion.active {
  --is-open: 1;
}

.accordion-content {
  /* Altura que se anima entre 0 y el valor máximo */
  height: calc(var(--is-open) * var(--max-height));
  opacity: var(--is-open);
  overflow: hidden;
  transition: height 0.3s, opacity 0.3s;
}

Este patrón utiliza una variable como interruptor booleano para controlar propiedades múltiples.

Optimización del rendimiento

Al combinar funciones matemáticas y variables CSS, es importante considerar el rendimiento:

• Evita cálculos excesivamente anidados que podrían afectar el rendimiento de renderizado
• Precalcula valores cuando sea posible en lugar de recalcularlos en cada elemento
• Considera el uso de will-change para propiedades que cambiarán frecuentemente

/* Enfoque optimizado */
:root {
  --base: 16px;
  --large: calc(var(--base) * 2);  /* Precalculado una vez */
}

.elemento {
  padding: var(--large);  /* Usa el valor precalculado */
}

Compatibilidad entre navegadores

Para garantizar la compatibilidad, podemos proporcionar alternativas para navegadores que no admiten variables CSS o funciones matemáticas:

.container {
  /* Fallback para navegadores antiguos */
  padding: 20px;
  width: 90%;
  
  /* Versión moderna con variables y funciones */
  padding: var(--container-padding, 20px);
  width: min(var(--max-width, 1200px), 90%);
}

Ejemplo práctico: Sistema de componentes completo

Veamos cómo podríamos implementar un sistema de componentes completo utilizando la combinación de variables CSS y funciones matemáticas:

:root {
  /* Sistema base */
  --unit: 8px;
  --radius-base: 4px;
  --transition-base: 0.3s ease;
  
  /* Colores */
  --color-primary-h: 210;
  --color-primary-s: 80%;
  --color-primary-l: 50%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  
  /* Tipografía */
  --font-size-base: 16px;
  --line-height-base: 1.5;
  
  /* Espaciado */
  --space-xs: calc(var(--unit) * 0.5);
  --space-sm: var(--unit);
  --space-md: calc(var(--unit) * 2);
  --space-lg: calc(var(--unit) * 3);
  --space-xl: calc(var(--unit) * 4);
}

/* Componente de botón adaptable */
.button {
  --button-padding-x: var(--space-md);
  --button-padding-y: var(--space-sm);
  --button-radius: var(--radius-base);
  
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  font-size: clamp(calc(var(--font-size-base) * 0.875), 1vw + 0.5rem, var(--font-size-base));
  background-color: var(--color-primary);
  color: white;
  transition: transform var(--transition-base), background-color var(--transition-base);
}

.button:hover {
  background-color: hsl(
    var(--color-primary-h), 
    var(--color-primary-s), 
    calc(var(--color-primary-l) - 10%)
  );
  transform: translateY(calc(var(--unit) * -0.25));
}

.button--large {
  --button-padding-x: var(--space-lg);
  --button-padding-y: var(--space-md);
  --button-radius: calc(var(--radius-base) * 1.5);
}

.button--small {
  --button-padding-x: var(--space-sm);
  --button-padding-y: var(--space-xs);
  --button-radius: calc(var(--radius-base) * 0.75);
}

Este sistema permite crear variantes de componentes simplemente modificando las variables, manteniendo la coherencia visual y facilitando los cambios globales.

La combinación de funciones matemáticas y variables CSS representa un cambio de paradigma en el desarrollo frontend, permitiéndonos crear sistemas de diseño más flexibles, mantenibles y coherentes que se adaptan a diferentes contextos y necesidades.