| <html> | |
| <head> | |
| <title>Example: px2rem</title> | |
| </head> | |
| <body> | |
| <h2>This is in rems but it's also 20px.</h2> | |
| </body> | |
| </html> |
Created to allow teams to easily use the superior rem unit of measurement without losing time in translation between px and rem or force Design teams to learn rems.
Credit for the calculation (round($val) / $base;) goes to Edward Irby(https://github.com/EdwardIrby/ephemeralXYZ/blob/master/app/src/utils/_util.scss)
Thanks to Offroad Code for the original REM calculator I used which inspired me to create this. https://offroadcode.com/prototypes/rem-calculator/
| @import "bourbon"; | |
| @function parseInt($n) { | |
| $int: $n * 0 + 1; | |
| @return $n / $int; | |
| } | |
| @function remCalculator($pixelValue){ | |
| $font-unit: 0rem; | |
| // strip px from values | |
| $pixelValue: round(parseInt($pixelValue)); | |
| $baseFontValue: parseInt($font-size-base); | |
| // calculate rem value in comparison to base fontsize | |
| $remCalc: $pixelValue / $baseFontValue; | |
| @return $remCalc + $font-unit; | |
| } | |
| // USAGE | |
| $font-size-base: 16px; | |
| html, body { | |
| font-size: $font-size-base; | |
| } | |
| h2 { | |
| font-size: px2rem(20px); | |
| } |