Skip to content

Instantly share code, notes, and snippets.

@yoshuawuyts
Last active June 2, 2021 17:34
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yoshuawuyts/5693656 to your computer and use it in GitHub Desktop.
Save yoshuawuyts/5693656 to your computer and use it in GitHub Desktop.
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
Copy link
Author

Try it on the stylus website.

@yoshuawuyts
Copy link
Author

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