Using REM Calculator

Calculating rem units can be a real pain. Fortunately there is a mixin for that. It's real easy to use - just pass it the parameter you want and the pixel values you want. The mixin will do the rest. With the exception of borders, you can use this on nearly every CSS property.

For example, the following:

.yourclass {
 @include rem(height, 200px);
 @include rem(margin, 20px 10px 40px 20px);
 @include rem(padding-top, 20px);
}

Will yeild the following css:

.yourclass {
 height: 200px;
 height: 12.5rem;
 margin: 20px 10px 40px 20px;
 margin: 1.25rem 0.625rem 2.5rem 1.25rem;
 padding-top: 20px;
 padding-top: 1.25rem;
}

REM only units

If you do not want the px fallback to be added, you just need to turn that off in the _settings-type.scss file.

$rem-px-only: true;

This is a global setting that will effect all of Slates mixins and typography. Browser support is pretty good for rem units. Only turn this on if you need archaic browser & device support.