@include

Including a Mixin: @include

Mixins are included in the document with the @include directive. This takes the name of a mixin and optionally arguments to pass to it, and includes the styles defined by that mixin into the current rule. For example:

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

is compiled to:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

Mixins may also be included outside of any rule (that is, at the root of the document) as long as they don’t directly define any properties or use any parent references. For example:

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

is compiled to:

a {
  color: blue;
  background-color: red; }

Mixin definitions can also include other mixins. For example:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

Mixins may include themselves. This is different than the behavior of Sass versions prior to 3.3, where mixin recursion was forbidden.

Mixins that only define descendent selectors can be safely mixed into the top most level of a document.