Rem

@unsass/rem provides a consistent way to express CSS lengths in rem, converting from pixels against a single, configurable baseline.

Unlike em, rem always resolves against the document root, so conversions need no per-call context — just one baseline for the whole project.

Repository: github.com/unsass/rem

Install

npm

npm install @unsass/rem

yarn

yarn add @unsass/rem

pnpm

pnpm add @unsass/rem

Requirement

Rem builds on @unsass/css (installed automatically), which relies on the modern Sass if() syntax, so a Dart Sass compiler >= 1.95.0 is required.

Basic usage

SCSS

@use "@unsass/rem";

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

CSS

.foo {
    font-size: 1rem;
}

Next steps

• Configuration — set the baseline.
• Functions and Mixins — the full API.
• Best Practices — what to convert and what to leave alone.