Using rem units with an easy pixel fallback

I wont write about the concept of rem units. If you haven't hear about them, read an amazing post by Maxi Ferreira.

As Maxi stated, If you support IE8 or any other browser without support for this new unit, you must code a pixel fallback for every CSS rule where rem is used. This can be tedious and unproductive. So, I've created a collection of mixins for {less} which automatically convert pixel measures into rem units. The collection is called remixings.

The mixins are intuitive and straightforward to use. For example:

include "remixins.less";

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

The output CSS will be:

.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%;
}

Read more about remixings and a complete list of available mixins in its github repo.