Utility Mixins

With the help of SCSS, we have created a library of re-usable ultility mixins that you can use to write more efficient and enhanced styles.

"Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries."

• sasslang.com

Find out more

Example

/* Define mixin to fill element to fit size of parent container */
@mixin fill (
  $unit: 0,
  $position: absolute
) {
  position: $position;
  top: $unit;
  right: $unit;
  bottom: $unit;
  left: $unit;
}

/* Call mixin */
.foo {
	@include fill();
}

.foo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}