Sass Utils

Functions

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.2ⁿ).

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;
}

Mixins

Clearfix

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

div {
  @include cf;
}

Breakpoints

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) {}

Positions

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);

Background

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);

Ellipsis

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

span {
  @include ellispis;
}