Last active
June 2, 2021 17:34
-
-
Save yoshuawuyts/5693656 to your computer and use it in GitHub Desktop.
Stylus REM mixin (font-size, line-height).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Try it on the stylus website.