General

mixins

clearfix

@mixin clearfix() { ... }

Description

Outputs a micro clearfix hack on a parent element, to contain floated children elements without adding extra markup.

Parameters

None.

Example

.element {
  @include clearfix;
}

// CSS Output
.element:after,
.element:before {
  content: "";
  display: table;
}
.element:after {
  clear: both;
}

ellipsis

@mixin ellipsis($width: 100%, $display: block) { ... }

Description

Adds an ellipsis to overflowing text.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Adds a `max-width` to the element being truncated.	`Number`	`100%`
`$display`	Gives the element custom display type.	`String`	`block`

Example

.element {
  @include ellipsis();
}

// CSS Output
.element {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

font-smoothing

@mixin font-smoothing() { ... }

Description

Adds prefixed font-smoothing properties. Before using, consider if legibility will be harmed

Parameters

None.

Example

.element {
  @include font-smoothing;
}

// CSS Output
.element,
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}