Sass Units Translate

Easily convert units with Sass.

0. Install

npm install sass-units-translate --save-dev

Import into your stylesheet.

@import "sass-units-translate"

1. Set global base font size.

// Setup base font size
@include sut-core-set-base(16px);
// @include sut-core-set-base(100%);
// @include sut-core-set-base(1em);
// @include sut-core-set-base(1);

Note: This is only setting a global variable and will not output any CSS.

2. Translate

Simple

Convert to em, rem, percent, relative and px.

h1 {
  $font-size: em(32px); // 2em
  $font-size: rem(2em); // 2rem
  $font-size: percent(2rem); // 200%
  $font-size: rel(200%); // 2
  $font-size: px(2); // 32px
}

Simple Multiple

h1 {
  $font-size: em(2em 2rem 200% 2 32px); // 32px 32px 32px 32px 32px
}

With Base Sizes

Convert from em, rem, percent, relative and px.

h1 {
  $font-size: em(32px, 2em); // 1em
  $font-size: rem(32px, 2rem); // 1rem
  $font-size: percent(32px, 200%); // 100%
  $font-size: rel(32px, 2); // 1
  $font-size: px(2em, 32px); // 64px
}

View generated documentation