Tamanho de fonte com REM em SCSS

Acabamos de começar a usar pré-processadores CSS aqui no escritório (sim, estávamos um pouco atrasados ​​para a festa). Decidimos que SCSS era o caminho a percorrer e confiar na biblioteca Compass em sua maior parte.

As versões atuais do tema WordPress enfatizam a importância de usar REMs no futuro para o dimensionamento de fontes, sempre com um fallback de pixel.

Quando pesquisei isso no site do Compass, descobri que havia muita discussão e nenhum suporte real embutido. Portanto, decidi preparar o meu próprio.

$base_font_size: 16;

@mixin font($pixels, $weight : normal) {
font-size: $pixels + px;
font-size: ( $pixels / $base_font_size ) + rem;
font-weight: $weight;
}

E nós o incluímos desta forma.

@include font(14, bold);

E nós entendemos isso!

font-size: 14px;
font-size: 0.875rem;
font-weight: bold;

Basicamente, pegamos qualquer valor de pixel que deva ser, dividimos por nosso tamanho de fonte base (ou seja, 16) e automaticamente cuspimos nosso valor REM com nosso fallback de pixel .

Também definimos a espessura da fonte, nosso padrão é normal, mas no caso de precisarmos negrito ou sobrescrever a opção está disponível.