@sass-collective/em


Introduction

Sass function & mixin to convert pixel to em.

> Note: this code has been moved to @unsass/em new package, use this one for
> better support.

Installing

``shell
npm install @sass-collective/em
`

Usage

> TIP: you can declare each value without px unit, but be careful, if you use unit, only px will be allowed!

`scss
@use "@sass-collective/em";

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

margin: em.convert(20px 30px, 16px);
// margin: 1.25em 1.875em;

border: em.convert(1px solid darkcyan, 16px);
// border: 0.0625em solid darkcyan;

box-shadow: em.convert(0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75), 16px);
// 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);
// Use parentheses for declare comma separated values list.
}

.bar {
@include em.convert(font-size, 16px, 16px);
// font-size: 1em;

@include em.convert(margin, 20px 30px, 16px);
// margin: 1.25em 1.875em;

@include em.convert(border, 1px solid darkcyan, 16px);
// border: 0.0625em solid darkcyan;

@include em.convert(box-shadow, (0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75)), 16px);
// 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);
// Use parentheses for declare comma separated values list.
}
`

Namespace

`scss
@use "@sass-collective/em" as foo;

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

.bar {
@include foo.convert(font-size, 16px, 16px);
// font-size: 1em;
}
`

$3

You can use the fallback name if your namespace is not enough explicit for what ever reason!

`scss
@use "@sass-collective/em" as foo;

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

.bar {
@include foo.em(font-size, 16px, 16px);
// font-size: 1em;
}
`

API

$3

| Function | Description |
|-----------------------|----------------------------------------|
| convert($values...) | Convert px unit to em. |
| em($values...) | Fallback name of convert() function. |

$3

| Mixin | Description |
|----------------------------------------------------|---------------------------------------------------------------------------------|
| convert($property, $value, $context, $important) | Sets property with conversion of px unit to em, with optional !important. |
| em($property, $value, $context, $important) | Fallback name to convert()` mixin. |