# @sass-collective/em

> Sass function & mixin to convert pixel to em.

Latest version **2.6.0** (published 2022-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sass-collective/em
pnpm add @sass-collective/em
yarn add @sass-collective/em
bun add @sass-collective/em
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.6.0 |
| Published | 2022-03-23 |
| First published | 2021-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.0.0 |
| Dependencies | 4 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | The Sass Collective Authors |
| Maintainers | bdamevin |
| Keywords | sass, em, convert, css, front-end |

## Links

- npm: https://www.npmjs.com/package/@sass-collective/em
- Repository: https://github.com/sass-collective/sass-collective
- Homepage: https://github.com/sass-collective/sass-collective/tree/master/packages/em
- Issues: https://github.com/sass-collective/sass-collective/issues
- npm.io page: https://npm.io/package/@sass-collective/em

## Dependencies (4)

- [sass](https://npm.io/package/sass.md) ^1.45.2
- [@unsass/css](https://npm.io/package/@unsass/css.md) ^1.0.0
- [@sass-collective/property](https://npm.io/package/@sass-collective/property.md) ^4.7.0
- [@sass-collective/strip-unit](https://npm.io/package/@sass-collective/strip-unit.md) ^3.1.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.6.0 (latest) — 2022-03-23
- 2.5.8 — 2022-02-25
- 2.5.7 — 2022-02-24
- 2.5.6 — 2022-02-18
- 2.5.5 — 2022-01-03
- 2.5.4 — 2021-12-14
- 2.5.3 — 2021-12-10
- 2.5.2 — 2021-11-19
- 2.5.1 — 2021-11-02
- 2.5.0 — 2021-09-06
- 2.4.0 — 2021-09-02
- 2.3.0 — 2021-09-01
- 2.3.0-beta.0 — 2021-09-01
- 2.2.0 — 2021-08-19
- 2.1.0 — 2021-07-03
- … 12 more at https://npm.io/package/@sass-collective/em/versions

## README

<div align="center">

![Sass Em](.github/logo.svg)

</div>

[![Version](https://flat.badgen.net/npm/v/@sass-collective/em)](https://www.npmjs.com/package/@sass-collective/em)
[![Downloads](https://flat.badgen.net/npm/dt/@sass-collective/em)](https://www.npmjs.com/package/@sass-collective/em)
[![License](https://flat.badgen.net/npm/license/@sass-collective/em)](https://www.npmjs.com/package/@sass-collective/em)

## Introduction

Sass function & mixin to convert pixel to em.

> **Note:** this code has been moved to [`@unsass/em`](https://github.com/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;
}
```

### Fallback name

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

### Sass functions

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

### Sass mixins

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

---
_Source: https://npm.io/package/@sass-collective/em · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._