Cargando...

Calc y funciones matemáticas CSS

Las propiedades personalizadas te dieron nombres para valores. Las funciones matemáticas permiten calcular en tiempo de render: resta la barra lateral de 100%, limita con min() o escala tipografía con clamp() — sin paso de build en Sass.

`calc()` — aritmética en el valor

Expresión dentro de calc(...). Suma y resta exigen espacios alrededor del operador:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

Mezcla %, rem, px, vw y var() si el resultado es válido.

Espacios y reglas de unidades

Inválido: calc(100%-2rem). Válido: calc(100% - 2rem). En *, un factor debe ser número.

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

`min()` y `max()`

min() elige el menor; max() el mayor:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — valores fluidos acotados

Orden: mínimo, preferido, máximo.

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

Las funciones se resuelven al calcular el valor — encajan con tokens en :root y respetan la cascada como cualquier otra longitud.

¿Qué función cuándo?

📊 Funciones matemáticas

Función	Idea	Uso típico
calc()	fórmula para una propiedad	restar márgenes, duplicar token
min()	«no más grande que…»	tope de ancho
max()	«al menos…»	mínimo de tamaño
clamp()	min + preferido + max	tipografía fluida

Patrón simple de altura

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

Pruébalo

Dos columnas con calc en main.
Sustituye font-size fijo por clamp.
min(100%, 40rem) en un artículo.
Fórmula repetida en :root como token.
Corrige espacios en calc(100%-1rem).

Errores frecuentes

Sin espacios en calc(100%-2rem)
clamp con min > max
max() cuando querías techo (min())
calc en el nombre de propiedad
dividir dos longitudes

Resumen

calc() — espacios en + / -
min() / max() — extremos de una lista
clamp() — tipografía fluida
Combina con var(--tokens)
Siguiente: anidamiento CSS

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma