sass-px-to-em-converter

sass-px-to-em-converter.md

sass-px-to-em-converter

Diddy SASS helper to generate CSS in EMs when your designers specify pixels:

  // Helper to convert the designers' px specifications into EMs:
  // Eg: H2 { font-size: em(28px); }
  @function em( $px, $basePx: $baseFontPx ) {
    $px:     $px     / ($px     * 0 + 1);   // Strip off units to be sure we have a plain number. (eg: 20px -> 20)
    $basePx: $basePx / ($basePx * 0 + 1);   // Strip off units to be sure we have a plain number. (eg: 20px -> 20)
    @return  $px / $basePx * 1em;           // The *1em ensures we return an EM number.
  }

  $baseFontPx: 16px;

SCSS sample usage:

  H1 {
    font-size: em(32px);
    margin: em(10) em(50);
    SMALL {
      font-size: em(28px,32px);
    }
  }

Resulting CSS:

  H1 {
    font-size: 2em;
    margin: 0.7143em 3.5714em;
  }
  H1 SMALL {
    font-size: 0.875em;
  }