Sass 101 - A newb's guide: mixins

mixins.md

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document.

Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin.

In the following example, the Mixin is included in the document with the @include directive.

mixins.scss

SassMeister Gist

mixins.scss

@mixin default-box {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto;
}

.my-new-class {
  @include default-box;
}