• 2.5.0

Mixins

Notice: most of the mixins use values defined in the settings file by default. The exact outputed value may differ from the examples below.

foreach-breakpoint($breakpoints: $breakpoints-default, $prefix: null)

Loop through the given breakpoints list. Each iteration get the breakpoint name as $breakpoint-name. Both parameters are optional.

@include foreach-breakpoint($breakpoints-default, 'screen and') {
  .#{$breakpoint-name}-text-center {
    text-align: center;
  }
}

Will generate:

@media screen and (min-width: 40.0625em) {
  .sm-text-center {
    text-align: center;
  }
}

@media screen and (min-width: 48.0625em) {
  .md-text-center {
    text-align: center;
  }
}

@media screen and (min-width: 64.0625em) {
  .lg-text-center {
    text-align: center;
  }
}

foreach-alternative-spacing($spacings: $spacings)

Loop through the given spacings list, defaults to $spacings. $spacing-name and $spacing-value are available inside the loop.

@include foreach-alternative-spacing() {
  .box--#{$spacing-name} {
    padding: #{$spacing-value};
  }
}

Will generate:

.box--tight {
  padding: 0;
}

.box--tiny {
  padding: 7px;
}

.box--small {
  padding: 14px;
}

.box--large {
  padding: 38px;
}

.box--huge {
  padding: 77px;
}

media($mq, $breakpoints: $breakpoints-default)

Shortcut to scope content into a media query by using the breakpoint name as a parameter.

@include media('md') {
  .foo {
    bar: baz;
  }
}

Will generate:

@media (min-width: 48.0625em) {
  .foo {
    bar: baz;
  }
}

clearfix

The famous self-clear technique.

.foo {
  @include clearfix;
}

Will generate:

.foo::after {
  content: '';
  display: table;
  clear: both;
}

wrap-words

Wrap words with hyphenation when they can’t fit their container. Also available as .text-wrap helper class.

.foo {
  @include wrap-words;
}

Will generate:

.foo {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

headings

Shortcut to match all heading levels.

@include headings {
  color: inherit;
}

Will generate:

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: inherit;
}

screen-readers-only

Magic conbination of properties to make an element accessible/visible to screen readers only.

.my-element {
  @include screen-readers-only;
}

Will generate:

.my-element {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;

  position: absolute !important;

  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}