sass-em

Sass function and mixin to convert px in em.

Breaking changes

• 3.0: changed default function name when imported globally (@use "rem" as *; or @import "sass-rem";) to em-convert to match sass-rem, as CSS now use rem() for calculating the remainder. It shouldn't change anything if you used Sass Modules introduced in 3.0 (em.convert).

• 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.

Installation

Install with Yarn or npm:

• yarn add sass-em
• npm install sass-em

Usage

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;
}

Namespace

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: https://github.com/pierreburel/postcss-em
• sass-rem: https://github.com/pierreburel/sass-rem