Web Unit: px to REM

There are different kinds of units; pixel, em, REM, % etc. I use REM as much as I can. R stands for root. It doesn’t matter how deep the HTML element is located. It is always based on the font size of the root. The problem with EM is if you only look at the EM size, you cannot guess how big the EM size is actually. To get this REM value, I use a function blow;

Convert a pixel value to REM units

// Convert a pixel value to REM units 
@function pxToRem($pixel) {
 @return $pixel/$base-font-pixel + rem;
}

Create ‘functions.scss’ file, paste above code in the functions file and import it to ‘main.scss’.

• 16px = 16/16 em = 1em
• Find out more about web unit REM.

And here now, instead of ‘20px’ I can say ‘pxToRem(20)’. This 20px will be automatically converted to REM value.