Skip to content

@yoshuawuyts /Stylus REM mixin
Last active

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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
p
font-size(16)
@yoshuawuyts
Owner

Try it on the stylus website.

@yoshuawuyts
Owner

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
Something went wrong with that request. Please try again.