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
}
