🥁 nouba-unit

Sass functions and mixin to use rem w/ optional px fallback.

nouba-unit is a fork from compass/typography/units.

Installation

npm install nouba-unit

Usage

@charset "UTF-8";
 
@import "path/to/node_modules/nouba-unit/unit";
 
// Length unit in which to output rhythm values. 
$n-unit-global: "rem";
 
// Toggle optional `px` fallback. 
$n-unit--rem-with-px: false;
 
@debug n-unit-convert(1em, $n-unit-global);
// /path/to/style.scss:11 DEBUG: 1rem 
 
@debug n-unit-px-rem_(1px);
// /path/to/style.scss:14 DEBUG: ("px": 1px, "rem": 0.0625rem) 
 
@debug n-unit-px-rem((2px, 3rem, 5.8rem));
// /path/to/style.scss:17 DEBUG: ("px": 2px, 48px, 93px, "rem": 0.125rem, 3rem, 5.8rem) 
 
.foo {
  @include n-unit-rem("property", 13px);
}
 
.foo {
  @include n-unit-rem("property", (34px 5.5rem 8rem));
}
 
.foo {
  @include n-unit-rem("property", 2.1rem, true);
}

.foo {
  property: 0.8125rem;
}
 
.foo {
  property: 2.125rem 5.5rem 8rem;
}
 
.foo {
  property: 34px;
  property: 2.1rem;
}

Author

• Zaza Africa

Collaborators

• Aziz Da

---