What does the @include keyword do in Sass?

The @include keyword is used to apply a mixin. When the mixin is applied, its processed body is inserted into a selector.

In the example below, the mixin alert will be used two times. First its body will be inserted into the .alert-success selector, then it will be inserted into the .alert-error selector.

Sass:

@mixin alert($color, $bgColor) {
  border: solid 1px $color;
  color: $color;
  background-color: $bgColor;
}

.alert-success {
  @include alert(green, whitesmoke)
}

.alert-error {
  @include alert(red, yellow)
}

The Sass from above will be compiled to the following CSS:

.alert-success {
  border: solid 1px green;
  color: green;
  background-color: whitesmoke;
}

.alert-error {
  border: solid 1px red;
  color: red;
  background-color: yellow;
}