Hemos hablado de "¿Por qué Ems?" Aquí antes.
Para aquellos nuevos en los valores de em, The Mozilla Developer Network hace un excelente trabajo al explicar ems:
… Una em es igual al tamaño de la fuente que se aplica al padre del elemento en cuestión. Si no ha establecido el tamaño de fuente en ninguna parte de la página, entonces es el navegador predeterminado, que probablemente sea 16px. Entonces, por defecto 1em = 16px y 2em = 32px.
Si todavía prefiere pensar en px, pero le gustan los beneficios de em, no necesita tener su calculadora a mano, puede dejar que Sass haga el trabajo por usted. Hay varias formas de calcular ems con Sass.
Matemáticas en línea:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Nota: Necesitamos el "* 1em" allí para que Sass agregue correctamente el valor unitario. También puede utilizar "+ 0em" para el mismo propósito.
Resultado:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Esto funciona, pero podemos hacerlo más fácil.
La función em () Sass
Hay bastantes formas diferentes de escribir esta función, esta de un artículo de Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )¡Súper inteligente! Esta función usa la interpolación de cadenas de Sass para agregar em al valor. Tenga en cuenta que el parámetro $ context tiene un valor predeterminado de $ browser-context (por lo tanto, sea lo que sea que establezca esta variable). Esto significa que al llamar a la función en su Sass, solo necesita definir el $pixelsvalor y las matemáticas se calcularán en relación $browser-context, en este caso, con 16px.
Ejemplo de uso:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Resultado:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Una función similar que usa matemáticas en lugar de interpolación de cadenas de The Sass Way se puede modificar fácilmente para aceptar variables como nuestra función de interpolación de cadenas:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )Otro que usa el método unitless () de Sass:
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )Esto nos permite incluir la unidad px o no en la llamada a la función.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )