skip to main content

Convert Pixels to Rem in Sass

05 October, 2020

Posted in code
Tagged css

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.