@mixin

Defining a Mixin: @mixin

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. For example, the large-text mixin is defined as follows:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Mixins may also contain selectors, possibly mixed with properties. The selectors can even contain parent references. For example:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

For historical reasons, mixin names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a mixin called add-column, you can include it as add_column, and vice versa.