R.E.M. with LESS

REM fontsizing main idea

Get this file…

Source code of rem-mixin.less

// See http://snook.ca/archives/html_and_css/font-size-with-rem
.baseSize() {
    font-size:percentage(@baseSize/16);
}
.remFontSize(@px) { 
    font-size:~`"@{px}px"`;
    font-size:~`("@{px}"/"@{baseSize}")+"rem"`;
}
.remWidth(@px) {
    width:~`"@{px}px"`;
    width:~`("@{px}"/"@{baseSize}")+"rem"`;
}
.remHeight(@px) {
    height:~`"@{px}px"`;
    height:~`("@{px}"/"@{baseSize}")+"rem"`;
}

// adjust this size to your liking
@baseSize: 16; 

…build your own LESS file…

Source code of rem.less

@import "rem-mixin.less";
@baseSize: 10;

html { .baseSize(); }
body { .remFontSize(12); }
h1 { .remFontSize(24); }

…get your CSS file.

Source code of rem.css

html {
  font-size: 62.5%;
}
body {
  font-size: 12px;
  font-size: 1.2rem;
}
h1 {
  font-size: 24px;
  font-size: 2.4rem;
}