Skip to content

Instantly share code, notes, and snippets.

@johnlouie04
Created July 26, 2017 11:57
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save johnlouie04/3751c7e56c51bc902062c81999dd2666 to your computer and use it in GitHub Desktop.
Experimental Font Relativity in Different Unit Conversion ( px, em, per, pt, rem)
$unitless: 16; // resize to your desire need
$font-size-unit: $unitless + 0px;
@function rem($valuePixels, $context: $font-size-unit, $em: false, $per: false, $pt: false) {
@if (unitless($valuePixels)) {
$valuePixels: $valuePixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@if $per == true {
$valuePixels: ( $valuePixels * 6.25 * 0.16);
// % and em will behave and compute the same.
}
@if $em == true {
// $valuePixels: $valuePixels * 1;
$valuePixels: ( $valuePixels / 0.063 );
// % and em will behave and compute the same.
}
@if $pt == true {
$valuePixels: ( $valuePixels * 0.75 * 1.333333 );
// get the value of 1px in 1pt = 0.75 then multiply it by 1.333333 which the default value of pt to px
// https://websemantics.uk/tools/convert-pixel-point-em-rem-percent/
// http://www.endmemo.com/sconvert/pixelpoint.php
}
@return #{$valuePixels / $context}rem;
}
body {
font-size: $font-size-unit;
}
div {
font-size: rem(45px);
+ div {
font-size: rem(45);
+ div {
font-size: rem(2.85, $em: true);
+ div {
font-size: rem(45, $pt: true);
+ div {
font-size: rem(45, $per: true);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment