A Compass function to convert pixel font-sizes to em's

Compass px to em

@function em($target, $context: $base-font-size) {
   @if $target == 0 { @return 0 }
   @return $target / $context + 0em;
}

$base-font-size: 15px;

h1 {
	font-size: em(21px, 15px); // Outputs 1.4em
}

Is there a technical reason why + 0em is used instead of * 1em?

Is there a technical reason why + 0em is used instead of * 1em?

@stevenvachon I believe that's an implicit conversion to ensure the result ends up as em

With newest versions of Sass :

@use "sass:math";

@function em($target, $context: $base-font-size) {
  @if $target == 0 {
    @return 0;
  }
  @return math.div($target, $context) * 1em;
}

@function rem($target, $context: $base-font-size) {
  @if $target == 0 {
    @return 0;
  }
  @return math.div($target, $context) * 1rem;
}

$base-font-size: 16px;

html {
    font-size: $base-font-size;
    // Output: font-size: 16px;
}

body {
    font-size: rem(14px, $base-font-size);
    // Output: font-size: 0.875rem;
}

//or
body {
    font-size: rem(14px);
    // Output: font-size: 0.875rem;
}