Sass function and mixin to convert px in em.

Downloads in past


3.0.0a month ago9 years agoMinified + gzip package size for sass-em in KB


sass-em Node.js CI
Sass function and mixin to convert px in em.

Breaking changes

  • 2.0: now using Sass Modules, using @use and em is renamed to em.convert. You could still use @import with no changes (see usage below), but if you need LibSass/node-sass and Ruby Sass support (both deprecated), you should stay on 1.0 (which works fine) or use the PostCSS version.


Install with Yarn or npm:
  • yarn add sass-em
  • npm install sass-em


The em.convert function takes at least 2 parameters: the value(s) (px, mixed) and the context (px). There can be multiple values (eg. multiple box shadow), but the last parameter must be the context.
The em.convert mixin takes only 2 parameters: the properties (map of property: value) and the context (px). It can be used to convert the values of multiple properties with the same context.
Import in your project depending of your setup:
@use "em";
// or @use "~sass-em" as em;
// or @use "../node_modules/sass-em" as em;

$base-font-size: 16px;
$h1-font-size: 24px;

.demo {
  font-size: em.convert($h1-font-size, $base-font-size); // Simple
  border-bottom: em.convert(1px solid black, $h1-font-size); // Shorthand
  box-shadow: em.convert(0 0 2px #ccc, inset 0 0 5px #eee, $h1-font-size); // Multiple values
  // Multiple properties
  @include em.convert((
    margin: 20px 5%,
    padding: 10px
  ), $h1-font-size);

Will output :
.demo {
  font-size: 1.5em;
  border-bottom: 0.0416666667em solid black;
  box-shadow: 0 0 0.0833333333em #ccc, inset 0 0 0.2083333333em #eee;
  margin: 0.8333333333em 5%;
  padding: 0.4166666667em;


You can change the namespace when importing and use em function and mixin instead of convert:
@use "em" as to; // Because why not?

.demo {
  font-size: to.em(24px, 16px);

Or you can even load the library globally (but beware of conflicts, avoided by the idea of modules):
@use "em" as *;

.demo {
  font-size: em-convert(24px, 16px);

Legacy import

If you don't want to use Sass Modules, you can still use @import with em-convert function and mixin:
@import "sass-em";

.demo {
  font-size: em-convert(24px);

See also

  • PostCSS version:
  • sass-rem: