Sass function and mixin to convert px in em.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Sass function and mixin to convert px in em.

Demo: Sassmeister / Codepen

Compatibility: Sass 3.2+ (3.3+ for the mixin) and LibSass

See also:


Download _em.scss or install with Bower or npm:

bower install sass-em


npm install sass-em


Import _em.scss and use the em mixin or function.

The 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 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 "em";

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

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

That will output :

h1 {
  font-size: 1.5em;
  border-bottom: 0.04167em solid black;
  box-shadow: 0 0 0.08333em #ccc, inset 0 0 0.20833em #eee;
  margin: 0.83333em 5%;
  padding: 0.41667em;