Usando unidades rem com um substituto de pixel fácil

Não vou escrever sobre o conceito de unidades rem. Se você ainda não ouviu falar deles, leia um post incrível de Maxi Ferreira.

Como Maxi afirmou, se você suporta o IE8 ou qualquer outro navegador sem suporte para esta nova unidade, você deve codificar um pixel fallback para cada regra CSS onde rem é usado. Isso pode ser tedioso e improdutivo. Então, eu criei uma coleção de mixins para {less} que convertem automaticamente medidas de pixel em unidades rem. A coleção é chamada de remixagens .

Os mixins são intuitivos e simples de usar. Por exemplo:

include "remixins.less";

.class-definition {
    .height(20px);
    .font-size(15px);
    .line-height(20px);
    .margin(10px, 50%);
}

O CSS de saída será:

.class-definition {
    height: 20px;
    height: 2rem;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 20px;
    line-height: 2.0;
    margin: 20px 50%;
    margin: 2rem 50%;
}

Leia mais sobre remixings e uma lista completa de mixins disponíveis em seu repositório github.