Register to Better Coder! It's free.
Enjoy the premium features and succeed at every job interview.

What does the @include keyword do in Sass?

Experience Level: Junior
Tags: 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.


@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;


No Comments Yet.
Be the first to tell us what you think.
Sass for beginners
Sass for beginners

Are you learning Sass ? Try our test we designed to help you progress faster.

Test yourself