Converting px in SCSS

#scss

A lot of the time in designs they give the font-size, line-height and letter-spacing in px. Which isn't helpful as they mean having to get the calculator out to convert them to more useful units. But a combination of Sass functions and mixins can do the calculations for us.

Converting font-size

Here we want to use rems. This function is from https://dev.to/rekomat/comment/1ib3b:

// From https://dev.to/rekomat/comment/1ib3b
@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

This is literally doing the same calculation as we do on the calculator: font-size divided by 16px and then written in rems. If your base font size has been set to 10px (for example) then you'd need to change the 16px in the function to be 10px.

You can use this function to convert anything from px to rem, not just font-sizes.

Converting line-height

Here we do exactly the same as on the calculator to get a ratio:

@function convertLineHeight($fontSize, $lineHeight) {
  @return math.div($lineHeight, $fontSize);
}

Converting letter-spacing

And again it's the same calculator calculation and expressed in ems:

@function convertLetterSpacing($fontSize, $letterSpacing) {
  @return math.div($letterSpacing, $fontSize) * 1em;
}

Using the functions

To use those three functions we'd do this:

p {
  font-size: pxToRem(24px);
  line-height: convertLineHeight(24px, 30px);
  letter-spacing: convertLetterSpacing(24px, -0.48px);
}

Which is fine, but we have to give all three of them the font-size. We can use a mixin to make this more efficient:

@mixin textUtils($fontSize, $lineHeight: 1, $letterSpacing: 0) {
  font-size: pxToRem($fontSize);
  @if $lineHeight != 1 {
    line-height: convertLineHeight($fontSize, $lineHeight);
  }
  @if $letterSpacing != 0 {
    letter-spacing: convertLetterSpacing($fontSize, $letterSpacing);
  }
}

p {
  @include textUtils(24px, 30px, -0.48px);
  //@include textUtils(24px, 30px);
  //@include textUtils(24px);
}

This mixin is set up so it needs the font-size, but it doesn't matter if you don't give it the letter-spacing, because that could be 0. And just in case, it also works if you don't give it the line-height.