Sass Utils


Font-size calculation

Returns a font-size computed from $base-fz and a modular scale to the power of n (i.e $base-fz × 1.2n).

p {
  font-size: fz(1);

Rem-to-px conversion

Converting values from rems to pixels

div {
  height: px(2rem);

Px-to-rem conversion

Converting values from pixels to rems

div {
  border: rem(1px) solid $base-border-color;

Vertical-rythm units

Both of them return rem values computed from a quarter of line-height. rb() is an other function that also substracts the 2px added by a border.

div {
  height: r(4);

span { height: rb(4); }

Z-index value

Returns a z-index value from the z-index map

.Overlay {
  z-index: zi("Overlay");

.Foo { z-index: zi("Overlay") + 1; }



Includes clearfix hack (you can also use .u-cf utility class)

div {
  @include cf;


Includes breakpoint from values listed in the breakpoints map

@include bp(min, max, orientation) {}
@include bp(phablet) {}
@include bp(phablet, desktop) {}
@include bp(phablet, null, portrait) {}


Includes position type (absolute or fixed) and position values

@include pos(type top right bottom left);
@include pos(a 0 0 0 0);
@include pos(a 0);
@include pos(a 0 null);


Sets some layout according to basic color-set ($neutral, $primary, $error, $info, $validate). Add white color with $hasText and force !important with $important.

@include bg($color, $hasText, $important);


Includes properties to create ellipsis: hidden overflow and dot dot dot.

span {
  @include ellispis;