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);
}