Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Stylus REM mixin (font-size, line-height).
//define default values (best to put this in the default.styl file)
base-font-size = 16
base-line-height = 24
//This is the useful part: it compares the given value to the base values and calculates the correct output
font-size($fontValue = base-font-size, $baseFontValue = base-font-size, $baseLineValue = base-line-height)
font-size $fontValue px
font-size ($fontValue / $baseFontValue) rem
line-height ($fontValue / $baseFontValue) * $baseLineValue
line-height ($baseLineValue/$baseFontValue) * ($fontValue / $baseFontValue) rem
//Test mixin, adjust the value to see it in action

yoshuawuyts commented Jun 2, 2013

Try it on the stylus website.


yoshuawuyts commented Jun 2, 2013

The result

p {
  font-size: 16 px;
  font-size: 1 rem;
  line-height: 24 px;
  line-height: 1.5 rem;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment