
PX vs REM vs EM etc
px
- border-width
- box-shadow
- text-shadow
- media queries
rem
- padding
- margin
- font-size
em
- Not used at the moment (possibly we should do media queries)
unitless
- line-height
sass
$html-font-size-default: 16; // Px to Rem converter @function rem-calc($size) { $remSize: $size / $html-font-size-default; @return #{$remSize}rem; } // Rem font size output with px fallback @mixin font-size($size: $html-font-size-default) { font-size: $size + px; font-size: rem-calc($size); }
How to apply:
html { @include font-size(16); line-height: rem-calc(16); }