public
Last active

Stylus REM mixin (font-size, line-height).

  • Download Gist
Stylus REM mixin
1 2 3 4 5 6 7 8 9 10 11 12 13 14
//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
p
font-size(16)

The result

p {
  font-size: 16 px;
  font-size: 1 rem;
  line-height: 24 px;
  line-height: 1.5 rem;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.