Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unsass/em
Sass functions and mixins to use em units.
https://github.com/unsass/em
convert em sass
Last synced: 16 days ago
JSON representation
Sass functions and mixins to use em units.
- Host: GitHub
- URL: https://github.com/unsass/em
- Owner: unsass
- License: mit
- Created: 2022-03-03T21:32:33.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T21:25:57.000Z (12 months ago)
- Last Synced: 2025-01-13T12:49:54.397Z (26 days ago)
- Topics: convert, em, sass
- Language: SCSS
- Homepage:
- Size: 505 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Em
[](https://www.npmjs.com/package/@unsass/em)
[](https://www.npmjs.com/package/@unsass/em)
[](https://www.npmjs.com/package/@unsass/em)
## Introduction
Sass functions and mixins to use em units.
## Installing
```shell
npm install @unsass/em
```
## Usage
```scss
@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...
```scss
@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...
```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...
```scss
@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...
```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);
}
```