Using REM Calculator

No need for a calculator. Feed this mixin a pixel value and it will spit out rem units with a fallback.

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 _config-typography.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.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.