Já falamos sobre “Por que Ems?” aqui antes.
Para aqueles novos valores em, The Mozilla Developer Network faz um excelente trabalho explicando ems:
… Um em é igual ao tamanho da fonte que se aplica ao pai do elemento em questão. Se você não definiu o tamanho da fonte em nenhum lugar da página, então é o padrão do navegador, que é provavelmente 16px. Portanto, por padrão, 1em = 16px e 2em = 32px.
Se você ainda prefere pensar em px, mas gosta dos benefícios deles, não precisa ter sua calculadora em mãos, você pode deixar Sass fazer o trabalho por você. Existem várias maneiras de calcular o ems com o Sass.
Matemática inline:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Nota: Precisamos do “* 1em” ali para que o Sass acrescente corretamente o valor da unidade. Você também pode usar “+ 0em” para o mesmo propósito.
Resultado:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Isso funciona, mas podemos tornar mais fácil.
A função em () Sass
Existem algumas maneiras diferentes de escrever esta função, esta de um artigo da Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super inteligente! Esta função usa a interpolação de string de Sass para anexar em ao valor. Observe que o parâmetro $ context tem um valor padrão de $ browser-context (portanto, seja qual for a definição dessa variável). Isso significa que ao chamar a função em seu Sass, você só precisa definir o $pixelsvalor e a matemática será calculada em relação a $browser-context- neste caso - 16px.
Exemplo de uso:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Resultado:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Uma função semelhante usando matemática em vez de interpolação de string do The Sass Way pode ser facilmente modificada para aceitar variáveis como nossa função de interpolação de string:
//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; )Outro usando o 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; )Isso nos permite incluir a unidade px ou não na chamada de função.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )