Em

Introduction

Sass functions and mixins to use em units.

Installing

npm install @unsass/em

Usage

@use "@unsass/em";

.foo {
    font-size: em.convert(16px, 16px);
}

API

Sass functions

| Function | Description | |-----------------------|----------------------------| | convert($values...) | Convert px unit to em. |

Convert with em.convert()

The following Sass...

@use "@unsass/em";

.foo {
    font-size: em.convert(16px, 16px); // Single value.
    margin: em.convert(20px 30px, 16px); // Multiple values.
    border: em.convert(1px solid darkcyan, 16px); // Multiple mixed values.
    box-shadow: em.convert(0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75), 16px); // Comma-separated values.
}

...will produce the following CSS...

.foo {
    font-size: 1em;
    margin: 1.25em 1.875em;
    border: 0.0625em solid darkcyan;
    box-shadow: 0 0 0.625em 0.3125em rgba(0, 139, 139, 0.75), inset 0 0 0.625em 0.3125em rgba(0, 139, 139, 0.75);
}

Sass mixins

| Mixin | Description | |--------------------------------------------------------|------------------------------------------------------------------------------------| | declaration($property, $value, $context, $important) | Sets declaration with conversion of px unit to em, with optional !important. |

Convert declaration with em.declaration()

The following Sass...

@use "@unsass/em";

.foo {
    @include em.declaration(font-size, 16px, 16px); // Single value.
    @include em.declaration(margin, 20px 30px, 16px); // Multiple values.
    @include em.declaration(border, 1px solid darkcyan, 16px); // Multiple mixed values.
    @include em.declaration(box-shadow, 0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75), 16px); // Comma-separated values.
}

...will produce the following CSS...

.foo {
    font-size: 1em;
    margin: 1.25em 1.875em;
    border: 0.0625em solid darkcyan;
    box-shadow: 0 0 0.625em 0.3125em rgba(0, 139, 139, 0.75), inset 0 0 0.625em 0.3125em rgba(0, 139, 139, 0.75);
}