Cómo se usa la función calc() en CSS3

Una de las herramientas más poderosas que nos da CSS3 en cuanto al manejo de tamaños es la función calc(). Recordemos que como tal CSS no es un lenguaje de programación el cual acepte funciones o algún otro tipo de estructuras más que las que ya conocemos, por lo tanto cal() es como un atributo único que podría llamarse función o simplemente un atributo especial.

En este tutorial vamos a ver cómo funciona la función calc() en CSS3, además de dar algunos consejos sobre cuando usarla, ya que no todos los casos aplica pero estoy seguro que les va a resolver algunos otros que en su vida habrían pensado que se podían hacer.

Los preprocesadores de CSS como SASS, Less, etc permiten tener operaciones o funciones en el CSS, una vez que se compila estas funciones pasan a ser atributos estáticos, es decir, ya aparecen definidos sin cambios. La importancia que tiene calc() es que calcula los valores que nosotros le coloquemos en tiempo real, por lo que es una propiedad dinámica.

Qué hace calc()

Lo que hace calc() es bastante sencillo y lógico. Calcula valores en base a las 4 operaciones básicas: +, –, *, /. Nosotros podemos hacer operaciones de todos los tipos de medidas que acepta CSS, desde pixeles, hasta porcentajes e incluso otras medidas como em, cm, etc.

Es aquí donde recae el poder de calc(), ya que si queremos que una capa esté al 50% pero le hace faltan dos pixeles para que envaje con nuestro layout basta calcularlo con calc(), pero mejor veamos un ejemplo.

Ejemplo

El ejemplo que más he tenido que utilizar es el de contenedores. Tenemos n contenedores de un ancho específico, pero el contenedor principal quiero que tenga de ancho el total de los anchos de los contenedores, algo como

w * n

donde w es el ancho de cada contenedor, y n el número total de contenedores. La solución sería sacar la calculadora y hacerlo manual, pero el problema es que si agrego otro contenedor tengo que volver a calcular el ancho total a mano, y lo que me quiero ahorrar es tener que saber el número exacto. Por eso implementamos algo así:

See the Pen pivFt by Marcos Rivas R (@marcosrivasr) on CodePen

El ejemplo muestra que si queremos un contenedor principal que quepa exactamente en el ancho de la suma de todos sus sub contenedores podríamos calcular el valor final y colocarlo. La forma más correcta de hacerlo es obtener el ancho inicial de un elemento y multiplicarlo por el número de elementos que tenemos, si agregamos un contenedor más solo incrementamos el número, y si cambiamos el ancho sólo modificamos el ancho dentro de la función, mas no tendríamos que hacer la operación de nuevo.