According to Stack Overflow's 2020 Developer Survey, developers have a tendency to dread CSS. I couldn't disagree more! SASS is amazing; It basically turns CSS into a programmatic language. Suddenly we can dynamically generate everything from comprehensive utility class names and styles to entire grid layouts. We can take advantage of some of Sass's features like functions and mixins for creating entire grid layouts and comprehensive utility classes.  But today we'll focus on the smaller example of converting pixels into rems to help ease into Sass.

According to the W3C spec the definition for one rem unit is:

One rem is equal to the computed value of the font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px). If you wanted to convert subsequent sizes to rems, you'd have to divide the pixel value by the base size of 16, which isn't easy to do in your head, if you're like me.

Enter SASS! We can create a function to generate the rem value for us.

$base-font-size: 16px;

@function calculate-rem($size) {
  $rem-size: $size / $base-font-size;
  @return #{$rem-size}rem;
}

h3 {
  font-size: calculate-rem(120px);
}

In the above code snippet, we set our base font size in a variable for clarity. We also defined a function that takes whatever pixel size we pass it and returns that value in rems. 

You can see how to use a function by looking at the h3 style declaration. We call the function where we'd normally declare a static value.

When this compiles, the value will be in rems!