La función calc() en CSS

La función calc() en CSS nos permite realizar operaciones matemáticas con valores. La gran ventaja de esta función es que los valores que utilicemos pueden estar en diferentes unidades de medida, lo que nos abre un abanico de posibilidades impensables hasta antes de su implementación. Aquí podéis ver un ejemplo:

.contenido {
  /* Resta 60px del 100% */
  width: calc(100% - 60px);
}

La función calc() en css es extremadamente útil y, para ciertas cosas, imprescindible si no usas un preprocesador de CSS o JS. En este artículo te enseñamos sus principales características y usos.

Calc() no trabaja con propiedades, sino con valores.

Solo puedes usar la función calc() en los valores de las propiedades CSS, estableciendo un valor para aquellas en las que uses calc() a partir del resultado de la operación que calcules con la función. Aquí tienes algunos ejemplos:

.caja {
  padding: calc(3vw + 2px);
  width:     calc(50% - 20px);
  height:    calc(100vh - 20px);
  line-height:   calc(1em + 4px);
}

Puedes usar calc() solo en una parte del valor de una propiedad, por ejemplo, en propiedades resumidas como border o margin, e incluso puedes usarlo dentro de otras funciones CSS. Más ejemplos:

/*calc() en una propiedad resumida/*
.caja {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

/*calc() como valor de otra función CSS/*
.caja {
   background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );

Solo puedes usar calc() en valores númericos.

Si te fijas bien, todos los ejemplos anteriores usan la función calc() con valores numéricos. Calc() no puede usarse con propiedades que usan palabras clave como valores (como display: block;) ni cosas parecidas, solo con valores numéricos.

.caja {
  /* Incorrecto */
  counter-reset: calc("Nuevo " + "valor");
}
.caja::before {
  /* Incorrecto */
  content: calc("Coronavirus " * 3);
}

Se admiten valores numéricos sin unidades, aunque depende del contexto: line-height: calc(1.2 * 1.2); al igual que en transformaciones de rotación transform: rotate(calc(10deg * 5));.

Calc() no funciona con media queries (snif!)

Si intentamos usar la función calc() de CSS en media queries para hacer diseño adaptable, comprobaremos que no funciona:

@media (max-width: 35rem) {
  /* 35rem o más pequeño*/
}

/* No funciona */
@media (min-width: calc(35rem + 1px)) {
  /* Justo más ancho de 35rem */
}

Mezclando unidades

Seguramente esta sea la característica más importante de la función calc() en CSS. Poder restar pixeles de un valor en vw, por ejemplo, sería imposible sin usar calc():

.columna {
  /* Resta 40px de 100vw */
  width: calc(100vw - 40px);
}

No hay ninguna manera de calcular, usando un preprocesador, el valor en pixels resultante de esa operación en un diseño con anchura fluida. Es decir, no puedes usar Sass o Less para conseguir el mismo resultado, debe hacerse «al vuelo», según el navegador modifica la anchura del elemento. Ahí es donde calc() se hace muy poderoso.

Vivan las matemáticas

Muchas veces, aunque puedas perfectamente precalcular el valor de una propiedad y escribirlo en tu hoja de estilos, usar la función calc() puede hacer mucho más claro la forma en que está construido un elemento. Por ejemplo, imagina que quieres hacer que un elemento sea exactamente la séptima parte de ancho que su padre:

.caja {
  /*Mejor así*/
  width: calc(100% / 7);

  /* ¿de dónde sale esto? */
  width: 14.2857142857%;
}

Ambas reglas de estilo hacen lo mismo, pero queda mucho más claro en la primera que en la segunda. Si lo llevamos a, por ejemplo, un layout con diferente número de columnas se ve mucho mejor:

.caja {
[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }
}

Operaciones válidas y sintaxis

A ver, olvídate de hacer integrales y ecuaciones complejas. Con calc podemos usar +, -, * y /, las cuatro operaciones básicas. Hay pequeñas diferencias en como usar cada una:

• La multiplicación (*) necesita que uno de los valores no tenga unidades.
• La división (/) requiere que el segundo operando no tenga unidades.
• Suma (+) y resta (-) requiere que todos los operandos tengan unidades.
• Entre los operandos y el signo de la división tiene que haber espacios en blanco.
• Se pueden usar valores negativos.

.caja {
  /* SUMA Y RESTA */
  /* Perfecto ? */
  margin: calc(10px + 10px);

  /* No vale ? */
  margin: calc(10px + 5);
  
  /* DIVISIÓN*/
  /* Perfecto ? */
  margin: calc(30px / 3);

  /* No vale? */
  margin: calc(30px / 10px);

  /* MULTIPLICACIÓN*/
  /* Perfecto ? */
  margin: calc(10px * 3);

  /* No vale ? */
  margin: calc(3px * 10px);

 /* ESPACIOS EN BLANCO*/
 /* Perfecto ? */
  font-size: calc(3vw + 2px);

  /* No vale ? */
  font-size: calc(3vw+2px);

  /* Perfecto ? */
  font-size: calc(3vw - 2px);

  /* No vale ? */
  font-size: calc(3vw-2px);
}

La función calc() y las custom properties en CSS

La función calc() de CSS puede usarse también con las propiedades personalizadas (variables las llaman algunos) de CSS. De hecho, esta es otra de las fantásticas características de la función calc():

body {
  --espaciado: 10px;
}

.caja {
  margin: calc(var(--espaciado) * 2);
}

Las posibilidades son infinitas. Imagina como setear ahora la maquetación de tus elementos usando custom properties al inicio, y después aplicar los estilos a tus elementos basándote en esas propiedades personalizadas y adaptándolas con calc(). Mira este ejemplo:

html {
  --margen: 10px;
  --margen-L: var(--margen) * 2;
  --margen-XL: var(--margen) * 3;
}

.caja[data-margen="XL"] {
  padding: calc(var(--margen-XL));
}

CSS se está dotando de herramientas que nos hacen la vida más fácil a los diseñadores y calc() es una de ellas. Se está trabajando en nuevas especificaciones que nos van a permitir tener mas control sobre el diseño de nuestras páginas.
Recuerda que la función calc() y mucho más lo puedes aprender en nuestro curso de Diseño y programación web. Nos vemos en Nowe!