Convert Pixels to Rem in Sass

It’s good practice to use rem for font sizes rather than px but remembering which rem value to use can be tricky.

Use a Sass function to calculate the rem value and a mixin to set the value.

@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;

@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);

Simply use the mixin whenever you want to set a font size value.

p {
  @include font-size(22px);
/* Output */
p {
  font-size: 22px;
  font-size: 1.375rem;

The mixin outputs the original pixel value as a fallback for old browsers where rem is not supported, and the calculated rem value after it which takes priority in all modern browsers.

That's me!

I’m Ajay Karwal. I write about my experiences as a front-end developer. If you enjoy my content, please consider supporting what I do.

Become a PatronBuy me a coffee