Logo Blog Pixwell

Web Design e outras coisas interessantes

Convertendo PX em EM com LESS CSS

Esses dias tive essa dúvida, como poderia converter Pixels em EM’s usando alguma função nativa do LESS, pesquisei e constatei que não há uma função específica para esse fim, então fiz um Mixin “pá nóis”:

.px-em(@atributo, @px){
 @{atributo}: @px/16em;
}

Explicando …

@atributo: É o atributo CSS que você quer usar, exemplo: font-size, padding, margin etc

@px: Valor em PX a ser convertido

@px/16em: Fórmula para conversão, onde “16” é o contexto para o tamanho de fontes.

Ou ainda, você pode usar uma variável no caso do tamanho base da fonte.

@tamanho_base_da_fonte_em_px: 16; /* Tamanho em PX */

.px-em(@atributo, @px){
 @{atributo}: (@px/@tamanho_base_da_fonte_em_px) + 0em;
}

Exemplo de Uso:

@tamanho_base_da_fonte_em_px: 16; /* Tamanho em PX */

.px-em(@atributo, @px){
 @{atributo}: (@px/@tamanho_base_da_fonte_em_px) + 0em;
}

.meu-container{
 background: #CCC;
 border: 1px solid #333;
 .px-em(padding, 20) /* Nao colocar o px no final */
}

Saída:

.meu-container{
 background: #CCC;
 border: 1px solid #333;
 padding: 1.25em
}

Endereço do código no Pastebin: http://pastebin.com/V8ZC5a3J

Mas … o que é o “tamanho base da fonte”?

“Tamanho base”, para quem não sabe é o Reset Global do tamanho padrão da fonte. Cada navegador tem um tamanho padrão, para uns o tamanho é 14px, para outros 16px, então no começo da nossa folha de estilo definimos o tamanho padrão “nosso”, assim todos os navegadores obedecerão o padrão definido, exemplo:

html{font-size: 16px}

Se quiser saber mais sobre Reset Global no CSS, veja esse post: Dica Tableless: Como fazer meu layout CSS carregar igual em navegadores diferentes?

Veja Também:   Como fazer um efeito realista de sombra no Photoshop