Last Updated: February 25, 2016
·
6.186K
· filipekiss

A SASS Mixin for dead-simple rem font-sizes

If you're wondering why you should use rem font-sizes instead of px an em, you can read it here and here. This is a simple tip to share a SASS mixin I use to print font-sizes.

html
  font-size: 62.5% //This way, 1rem = 10px, making it easier to define my text-sizes through the document

@mixin fontsize($size)
  font-size: $size * 1px
  font-size: $size * 0.1rem

Than you just declare the font-size using the mixin include

body
  font-family: Tahoma;
  @include fontsize(16) //This will render a font 16px or 1.6rem tall;

This code is also on github

:)