rem units less mixin

REAMDE.md

This assumes your base font variable is @base-font-size. Change accordingly.

This does not work with borders or shadows yet.

You can use this to do any of the following operations:

#logo {
  .rem(font-size, 40px);
  .rem(margin, 20px 10px);
  .rem(padding, 20px 20px 10px 15px);
}

Will return (assuming base font-size of 16px)

#logo {
  font-size: 40px;
  font-size: 2.5rem;
  margin: 20px 10px;
  margin: 1.25rem .625rem;
  padding: 20px 20px 10px 15px;
  padding: 1.25rem 1.25rem .625rem .9375rem;
}

rem.less

.rem(@property; @pixels) {
  /* make this work for pretty much anything */
  @processPixels: ~`(function(){var a="@{pixels}";a=0>a.indexOf("]")?[a]:a.replace(/[\[\],]/g,"").split(" ");return a.map(function(a){return parseInt(a,10)+"px"}).join(" ")})()`;
  @processRems: ~`(function(){var a="@{pixels}",a=0>a.indexOf("]")?[a]:a.replace(/[\[\],]/g,"").split(" ");return a.map(function(a){return parseInt(a,10)/parseInt("@{base-font-size}",10)+"rem"}).join(" ")})()`;

  @{property}: @processPixels;
  @{property}: @processRems;
}