Skip to content
On this page

Functions

This section will help you to use @unsass/rem functions.

convert($values...)

Easily convert px unit to rem.

Single value

scss
@use "@unsass/rem";

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

Result

css
.foo {
    font-size: 1rem;
}

Multiple values

scss
@use "@unsass/rem";

.foo {
    margin: rem.convert(20px 30px);
}

Result

css
.foo {
    margin: 1.25rem 1.875rem;
}

Multiple mixed values

scss
@use "@unsass/rem";

.foo {
    border: rem.convert(1px solid darkcyan);
}

Result

css
.foo {
    border: 0.0625rem solid darkcyan;
}

Comma-separated values

scss
@use "@unsass/rem";

.foo {
    box-shadow: rem.convert(0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75));
}

Result

css
.foo {
    box-shadow: 0 0 0.625rem 0.3125rem rgba(0, 139, 139, 0.75), inset 0 0 0.625rem 0.3125rem rgba(0, 139, 139, 0.75);
}