Have you failed a job interview?
Send us your job interview questions and get correct answers.

What does the @include keyword do in Sass?

Experience Level: Junior
Tags: Sass

Answer

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;
}
Recorded audio answers

Comments

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