Convertir De PX A EM Con SASS

Esta es una función super útil para desarrollar CSS con SASS, y es que siempre que diseñamos pensamos en PX pero debemos pensar en otras unidades de medidas más flexibles como son los EM.

Esta función realiza la conversión de manera automática cuando se compila el código, así que en vez de utilizar una herramienta independiente para convertir los PX en EM, solo tienes que escribir font-size: em (18px); o padding: 0 em (20px); en SASS.

// Funcion para convertir de PX a EM
@function em($target, $context: $base-font-size) {
  @if $target == 0 { @return 0 }
  @return $target / $context + 0em;
}

// variable para definir el tamaño del font que se usará como base
$base-font-size: 15px;

Para usarla solo tenemos que hacer lo siguiente:

h1 {
  font-size: em(25px, 16px); // salida 1.563em
}

// O si ya tienes definida la variable $base-font-size
// No tienes que pasarle el segundo parámetro.
h1 {
  font-size: em(25px); // salida 1.563em
}