Conversão PX para EM em Sass / Compass

Aqui está uma função de conversão PX para EM útil para SASS, também funciona se você estiver usando uma bússola como um ajudante.

// Enter a base pixel size in px (without the px)
$basepx: 16;

// Convert PX to EM global function
@function pxtoem($px, $basepx){
    @return ($px/$basepx)+0em;
}

Então, em uma classe ou elemento, você pode usar:

h1 { font-size: pxtoem(36, $basepx); }
h2  { font-size: pxtoem(28, $basepx); }
h3  { font-size: pxtoem(22, $basepx); }
.class { font-size: pxtoem(14, $basepx); }

ou em suas consultas de mídia:

@media all and (min-width: pxtoem(600, $basepx)) {
    .class {}
}

iria então produzir o valor em em vez de px na folha de estilo compilada!

Alguma pergunta?

Aproveitar!