Funciones en CSS

CSS incluye funciones integradas que permiten cálculos dinámicos, variables y layouts flexibles. Estas funciones son clave en un diseño moderno, responsivo y mantenible.

Función calc()

Calc() permite realizar operaciones matemáticas dentro de valores CSS, combinando porcentajes, píxeles y otras unidades.

Este ejemplo resta 50px al ancho total usando calc().

Función var()

Var() permite usar variables CSS definidas con --. Así se pueden controlar colores, tamaños u otras propiedades desde un solo lugar.

En este ejemplo var() usa una variable CSS como color de fondo.

Función minmax()

Minmax() se usa en grid layout para definir tamaños mínimo y máximo de columnas o filas, logrando layouts flexibles.

En este ejemplo, la primera columna de la grid mide al menos 150px y puede crecer si hay espacio.

Comparación de funciones

Consejos para usar funciones

Las funciones CSS hacen el código dinámico y mantenible, pero conviene saber cuándo usar cada una.

• Calc() evita wrappers innecesarios al calcular layouts.
• Var() es muy útil si repites colores o tamaños en varios lugares.
• Minmax() permite grids totalmente responsivos en pantallas pequeñas y grandes.