SASS | Mixin for convert px to rem

When i developing a new project, often, is more simply thinking in px than in rem ( px is smaller than rem, i think that permit to be more accurate, when i preview the modifies using browser inspect, and when i see the code, is more simply read the px than the REM. ), but, there si a “BUT..” I don’t want to have pixel in my code, REM are calculate on percent, and have a lot of vantage.

So here a SCSS rule for convert PX to REM ( or if you prefer in EM ).

Defining base font size

// The default font size for html is 16px
$base-size: 16;
//Function to convert px value into rem
//You can replace rem with any other value you want (rem is most preferred value for web)
@function size($target, $context: $base-size) {
  @return ($target / $context) * 1em;
}
// Let's use the size whenever you want

body {
  margin: size(20);
}

That’s all