LESS REM/PX Mixin

index.html

<h1>Headline (4rem / 64px)</h1>
<p class="lead">This paragraph is a good example of what an intro or le*ad paragraph would look like*. The astericks in the paragraph mark off the 45th and 75th characters. This idea came from Trent Walton's <a href="http://trentwalton.com/2012/06/19/fluid-type/">Fluid Type article</a>.</p>
<p>This is your typical, base-level paragraph size. Typically I set all paragraphs to 16px, which is your default browser size anyway. The mixin can be adjusted rather easily though by changing the <strong>@fontSize</strong> variable. You shouldn't have to adjust the <strong>@lineHeight</strong> variable, but you can if you wish.</p>

LESS-REM-PX-Mixin.markdown

LESS REM/PX Mixin

This is a simple LESS mixin where you can declare the REM value you want throughout your LESS docs and the mixin will properly convert given number into the REM value and PX fallback for IE browsers which don't support REM.

A Pen by Joshua Hynes on CodePen.

License.

style.less

// LESS MIXIN FOR FONT-SIZE & LINE-HEIGHT
// Declare variables.
@fontSize: 16;
@lineHeight: 1.5;

// Mixin
.size(@sizeValue: @fontSize, @heightValue: @lineHeight) {
  @pxValue: (@sizeValue * @fontSize);
  font-size: ~"@{pxValue}px";
  font-size: ~"@{sizeValue}rem";
  line-height: @heightValue;
}

// In order to set your REM value, you need to declare the BODY & HTML values first.
html, body {
  // Declare base font-size.
  font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; // Use Chris Coyier's Helvetica font stack
  font-size: ~"@{fontSize}px";
  font-weight: normal;
  line-height: @lineHeight;
  
  // Some simple cosmetic items
  background-color: #EEE;
  padding: 2em;
}

// CSS Properties
h1 {
  .size(4,1);
  margin: 0 0 0.5em;
}

p {
  .size(1,@lineHeight);
  
  &.lead {
    color: #666;
    .size(1.5,@lineHeight);
    
    a:link, a:visited { 
      background-color: transparent;
      color: red;
    }
    a:active, a:hover {
      background-color: fadeout(yellow,90%);
      color: fadeout(red, 30%);
    }
  }
}